?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<style>
    .wrap {
        padding: 100px;
    }
 
 
</style>
<body>
<div class="wrap">
    <button id="up">点击上传文件</button>
    <div>
        <p id="before"></p>
        <p id="process"></p>
        <div id="fileWrap">
            <p>上传文件列表</p>
        </div>
    </div>
</div>
 
<script>
    /*
     //php端回调参数$res:
     $res['code']=0 //上传成功
     $res['msg']='' //文件上传错误提醒
     $res['data']=    array( //已上传的文件
     array('StoredIn'=>'已上传文件信息'), //已上传文件1
     array('StoredIn'=>'已上传文件信息'), //已上传文件2 
     ... */
    //html页面js代码
    var btn = document.getElementById('up'),
        bf = document.getElementById("before"),
        prs = document.getElementById("process");
 
    btn.onclick = function () {
        myUpload({
            url: 'upload.php',
            maxSize: 10,
            multiple: true,
            beforeSend: function (file) {
                bf.innerText = "开始上传...";
            },
            callback: function (res) {
                res = JSON.parse(res);
                if (res && res.code == 0) {
                    // alert("上传成功!");
                    bf.innerText = "上传成功!"
                else {
                    alert(res.msg);
                }
                var fileWrap = document.getElementById('fileWrap');
 
                for (var i = 0; i < res.data.length; i++) {
                    var p = document.createElement('p');
                    var file = document.createElement('a');
                    file.href = '//front-js.cc/test/fileupload/' + res.data[i].StoredIn;
                    file.target = "_blank"
                    file.innerText = "文件名:" + res.data[i].StoredIn;
                    p.appendChild(file);
                    fileWrap.appendChild(p);
                }
            },
            uploading: function (pre) {
                prs.innerText = "当前上传进度为:" + pre + "%";
            }
        });
    }
 
    function myUpload(option) {
        var fd = new FormData(),
            xhr = new XMLHttpRequest(),
            input;
        input = document.createElement('input');
        input.setAttribute('id''myUploadInput');
        input.setAttribute('type''file');
        input.setAttribute('name''file');
        if (option.multiple) {
            input.setAttribute('multiple'true);
        }
        document.body.appendChild(input);
        input.style.display = 'none';
        input.click();
        var fileType = ['doc''docx''xls''xlsx''pdf''jpg''png''ppt''pptx'];
        input.onchange = function () {
            if (!input.value) {
                return;
            }
            console.log(input.value)
            var type = input.value.split('.').pop();
            if (fileType.indexOf(type.toLocaleLowerCase()) == -1) {
                alert("暂不支持该类型的文件,请重新选择!");
                return;
            }
            for (var i = 0, file; file = input.files[i++];) {
                if (option.maxSize && file.size > option.maxSize * 1024 * 1024) {
                    alert('请上传小于' + option.maxSize + 'M的文件');
                    return;
                }
            }
            if (option.beforeSend instanceof Function) {
                if (option.beforeSend(input) === false) {
                    return false;
                }
            }
            for (var i = 0, file; file = input.files[i++];) {
                console.log(fd)
                fd.append('file' + i, file);
            }
            xhr.open('post', option.url);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200) {
                    if (xhr.readyState == 4) {
                        if (option.callback instanceof Function) {
                            option.callback(xhr.responseText);
                        }
                    }
                else {
                    alert("上传失败!");
                }
            }
            xhr.upload.onprogress = function (event) {
                var pre = Math.floor(100 * event.loaded / event.total);
                if (option.uploading instanceof Function) {
                    option.uploading(pre);
                }
            }
            xhr.send(fd);
        }
    }
</script>
</body>
</html>
 
 
  


---------------------------------------------------------------------------------------------
不忘初心 方得始终!

唯有志存高远,方能风行天下。

道之所存,虽千万人吾往矣! 情之所钟,虽千万里吾念矣~

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。