删除自动提交 XMLHttpRequest

remove auto submit XMLHttpRequest

本文关键字：XMLHttpRequest 提交 删除      更新时间：2023-09-26

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

<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：对不起我的英语不好

您只需删除以下行即可

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

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

问候

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

  1. 侦听窗体调度的submit事件
  2. 向表单添加提交按钮。

像这样：

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

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

相关文章：