html5File/sendDataFile.html at master · marcuswang/html5File · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>操作文件</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src='jquery-1.7.1.min.js'></script>
    <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
    <script type="text/javascript" src='underscore-min.js'></script>
</head>
<body>
<h1>操作文件</h1>

<input type='file' id='myFile'>

<br />

<div id='showImage'>
</div>
<div id='proess'>
</div>
<script type="text/javascript">

    $('#myFile').on('change', function () {
        console.log(this.files[0].size);

        var file = this.files[0];
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        $(img).appendTo($('#showImage'));
        var reader = new FileReader();
        reader.onload = (function(aImg) {
            return function(e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);

        var button='<input type="button" value="提交" id="submit1">';
        $(button).appendTo($('#showImage'));
        $('#submit1').bind("click",function(){
            sendFiles();
        });
    });


    //文件上传

    function sendFiles() {
        var imgs = document.querySelectorAll(".obj");
        new FileUpload(imgs[0], imgs[0].file);
    }
    function FileUpload(img, file) {
        var xhr = new XMLHttpRequest();

        xhr.open("POST", "http://localhost:3000/upload?fileName=" + file.name+'&fileSize='+file.size);
        xhr.onload = function(e) {};
        // Listen to the upload progress.
        var progress = '<progress min="0" max="100" value="0">0% complete</progress>';
        $(progress).appendTo($('#proess'));
        var progressBar=document.querySelector('progress');
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                progressBar.value = (e.loaded / e.total) * 100;
            }
        };
        xhr.send(file);
    }


</script>

</body>
</html>