javascript - ajax不提交表单

Question

我正在开发文件共享服务。但是我遇到了一个问题。由于某种原因，正在选择文件，但是 AJAX 不会读取此选择，也不会自动上传文件。因此，该响应不会被处理回并插入到页面上的 DIV 中。

HTML + 表格

        <div class="file-input-wrapper"> 
          <form method="post" enctype="multipart/form-data" action="upload.xml">
          <button class="btn-file-input" id="bt">Select a File to Share</button>
          <input type="file" name="file" multiple />
          </form>
          <br/><br/>
          <div id="response"></div>
         </div>

JAVASCRIPT

(function () {
    var input = document.getElementById("file"),
        formdata = false;

    function showUploadedItem(source) {
        document.getElementById("image-list").innerHTML = "<li><img src='" + source + "' /></li>";
    }

    if (window.FormData) {
       formdata = new FormData();
       document.getElementById("bt").style.display = "inline";
    }

    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "<div class='uploading'></div>"
        var i = 0,
            len = this.files.length,
            img, reader, file;
        formdata = new FormData();
        //for ( ; i < len; i++ ) {
        file = this.files[i];

        if (file.type.match(/file.*/)) {
            if (window.FileReader) {
                reader = new FileReader();
                reader.onloadend = function (e) {
                    var source = e.target.result;
                    document.getElementById("image-list").innerHTML = "<li><img src='" + source + "' /></li>";
                };
                reader.readAsDataURL(file);
            }
            if (formdata) {
                formdata.append("file[]", file);
            }
        }
        //}

        if (formdata) {
            $.ajax({
                    url: "upload.xml",
                    type: "POST",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        document.getElementById("response").innerHTML = res;
                    }
                });
        }
    }, false);
})();

代码最初是有效的，但是当我尝试设置文件输入文件的样式时，这是地狱破裂并且事情破裂的时候，此时我不确定我做错了什么。

您还可以在此 URL 上查看实时代码：cyogen.com

Answer 1

这是因为您的 id 是“bt”而不是“btn”。在这一行：

document.getElementById("btn").style.display = "none";