這裏是react實現

將Import封裝在一起 Import.jsx

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 class Import extends React.Component {
 4     constructor(props) {
 5         super(props);
 6         this.bindHander();
 7     };
 8 
 9     bindHander() {
10         this.openDisk = this.openDisk.bind(this
 
);
11         this.readFileContent = this.readFileContent.bind(this);
12     };
13 
14     openDisk() {
15         this.fileUpload.click();
16     };
17 
18     readFileContent(e) {
19         let
20             _self = this,
21             file = e.target.files[0];
22         if (file) {
23             let
 
24                 reader = new FileReader();
25             reader.readAsArrayBuffer(file);
26             reader.onload = function () {
27                 _self.props.uploadCallback(file.name, new Uint8Array(this.result));
28             };
29         } else
30             console.log(‘error‘);
31     };
 
32 
33     render() {
34         return <input type="file" hidden ref={(el) => { this.fileUpload = el }} onChange={this.readFileContent} accept=".xml" />
35     }
36 };
37 export default Import;

在index.jsx中引用Import

 1 import Import from ‘./Import‘;
 2 const contants = {
 3     ERROR: ‘Error‘,
 4     TIMEOUT: ‘Load time out‘,
 5     LOADERROR: ‘Load error!‘,
 6     URLCANNOTFIND: ‘Url can not find‘
 7 }
 8 
 9 export class Test extends React.Component {
10     constructor(props) {
11         super(props)
12     };
13 
14     uploadClick() {
15         this.import.openDisk()
16     };
17 
18     uploadHandler(name, content) {
19         g.loading(true);
20         let
21             uploadFile = {
22                 name: name,
23                 fileContent: content
24             },
25             request = {
26                 method: ‘POST‘,
27                 headers: {
28                     ‘Accept‘: ‘application/json‘,
29                     "Content-Type": "application/json"
30                 },
31                 credentials: "same-origin",
32                 body: JSON.stringify(uploadFile)
33             };
34         fetch(‘api/test/fileupload‘, request).then(response => {
35             if (response.ok)
36                 return response.text();
37             else {
38                 if (response.status == 401) {
39                     g.loading(false);
40                     g.alert(true, {
41                         title: contants.ERROR,
42                         content: contants.TIMEOUT,
43                         type: ‘i‘,
44                         clickY: () => { console.log(contants.LOADERROR) }
45                     });
46                 }
47                 if (response.status == 400) {
48                     g.loading(false);
49                     g.alert(true, {
50                         title: contants.ERROR,
51                         content: contants.URLCANNOTFIND,
52                         type: ‘i‘,
53                         clickY: () => { console.log(contants.LOADERROR) }
54                     });
55                 }
56                 else throw new Error(response.statusText);
57             };
58         }).then(dataStr => {
59             if (dataStr == null || dataStr == ‘‘)
60                 return null;
61             else return JSON.parse(dataStr);
62         })
63     }
64 
65     render() {
66         return <div>
67             <div onClick={this.uploadClick.bind(this)}>{‘Upload Click‘}</div>
68             <Import
69                 ref={el => this.import = el}
70                 uploadCallback={this.uploadHandler.bind(this)}
71             />
72         </div>
73     }
74 }

js文件上傳