Question

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

<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：抱歉我的英文不好

Answer 1

问题在于您正在收听change事件。尝试：

收听由表单

submit

在表单中添加提交按钮。

类似的东西：

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

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

Answer 2

您只需删除以下行

即可

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);
    }

仅用于说明目的，尚未运行代码，但就是这样。

此致

删除自动提交XMLHttpRequest

2 个答案: