删除自动提交 XMLHttpRequest答案

【问题标题】：remove auto submit XMLHttpRequest删除自动提交 XMLHttpRequest
【发布时间】：2015-01-19 21:49:33
【问题描述】：

我只是测试了这个脚本并且工作正常，但我不喜欢这个脚本中的自动提交样式，并尝试像往常一样删除/禁用自动提交和添加提交按钮但没有工作。

<div id="div_data">

        <h2>Upload file</h2>
        <form id="myform" name="myform" method="POST" enctype="multipart/form-data">
            <input type="file" name="file" placeholder="Select file"/>
            <span id="status"></span>
        </form>
        <progress min="0" max="100" value="0">0% complete</progress><br/><span id="prosentase"></span><br/>
    </div>
    <div id="container"></div>

<script>
function uploadFiles(url, files) {
    document.querySelector('#status').innerHTML = 'loading..'; //tambahkan loading text
    var formData = new FormData(document.forms.namedItem("myform"));

    for (var i = 0, file; file = files[i]; ++i) { //bisa kita gunakan untuk multiple files
        formData.append(file.name, file);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.responseType = 'text'; //respondnya text

    xhr.onload = function(e) { 
        if (this.status == 200) {
            var text_ku = this.response;
            var div = document.createElement('div');
            div.innerHTML = text_ku;
            //document.body.appendChild(div);
            var container = document.querySelector('#container');
            container.insertBefore(div, container.firstChild);
            document.querySelector('#status').innerHTML = ''; //hilangkan loading text
        }
    };

    // Listen to the upload progress.
    var progressBar = document.querySelector('progress');
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            progressBar.value = (e.loaded / e.total) * 100;
            progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
            document.querySelector('#prosentase').innerHTML= progressBar.value+"%";
        }
    };

    xhr.send(formData);  // multipart/form-data
}

document.querySelector('input[type=file]').addEventListener('change', function(e) { 
  uploadFiles('http://example.com/upload.php', this.files);
}, false); // I have problem here

</script>

请帮我添加提交按钮。 ps：对不起我的英语不好

【问题讨论】：

标签： javascript jquery html xmlhttprequest

【解决方案1】：

您可以简单地删除以下行

document.querySelector('input[type=file]').addEventListener('change',     function(e) { 
  uploadFiles('http://example.com/upload.php', this.files);
}, false); // I have problem here

并在表单中添加如下提交按钮

<input type="submit" name="Submit" onclick="uploadFiles('http://example.com/upload.php', this);" />

然后将方法的初始行更改为：

function uploadFiles(url, filedata) {
    document.querySelector('#status').innerHTML = 'loading..'; //tambahkan loading text
    var formData = new FormData(document.forms.namedItem("myform"));

    files = filedata.files;
    for (var i = 0, file; file = files[i]; ++i) { //bisa kita gunakan untuk multiple files
        formData.append(file.name, file);
    }

仅用于说明目的，尚未运行代码，仅此而已。

问候

【讨论】：

【解决方案2】：

问题是您正在侦听change 事件。试试：

监听表单调度的submit事件
在表单中添加提交按钮。

类似：

document.forms.namedItem("myform").addEventListener("submit",
    function(e) { 
      uploadFiles(...);
    }, false);

更多信息在这里： http://www.w3schools.com/jsref/event_onsubmit.asp

【讨论】：

更改后的当前行为是什么？