無刷新上傳HTML+JS（支持chrome並已測試）

時間 2019-12-04

標籤刷新上傳 html+js html 支持 chrome 並已測試欄目 HTML 简体版

原文原文鏈接

待解決：多個文件同時上傳（既然能夠接受多個input域的表單上傳，必定能夠上傳FIle數組，但測試未成功，有待解決）
javascript

最近想作無刷新上傳，網上搜索N久，找到一個方法，記錄之。
html

ajaxfileupload.js 是一個jquery插件，可是調了兩天都沒成功。。繼續網上尋找解決方法，看到一個使用java

XMLHttpRequest 和 FormData 對象實現的，原文連接：http://itindex.net/blog/2012/04/14/1334367483953.htmljquery

原文未使用jquery。。。下面是我稍做修改的代碼，獲取File對象仍是有些笨。。有更好的方法但願您留個言哈。。ajax

廢話很少說了。
數組

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script>
        function performAjaxSubmit() {
            var text = $("#filename").val();
            //var file = document.getElementById("file1").files[0];
            var file = $("#file1")[0].files[0];

            var formdata = new FormData();
            formdata.append("filename", text);
            formdata.append("file1", file);

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/upload-mvc-txt.do", true);
            xhr.send(formdata);
            xhr.onload = function (e) {
                if (this.status == 200) {
                    alert(this.responseText);
                }
            };
        }
    </script>
</head>
<body>
<img id="loading" src="./images/loading.gif" style="display:none;"/>
<input id="file1" type="file" size="20" name="file1"/>
<input id="filename" name="filename" type="text" />
<button class="button" id="buttonUpload" onclick="performAjaxSubmit()">上傳</button>
</body>
</html>

能夠修改input：file的樣式，移步： http://my.oschina.net/cwzhang/blog/291398
mvc