點擊上傳文件後上傳圖片！按鈕沒有輸入改變事件

Question

我想上傳文件後上傳多個圖像！下面的按鈕不輸入變化事件是我的jQuery代碼（我下載代碼從這裏http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/）

的index.html

<div id="main"> 
    <h1>Upload Your Images</h1> 
    <form method="post" enctype="multipart/form-data" action="upload.php"> 
    <input type="file" name="images" id="images" multiple /> 
    <button type="submit" id="btn">Upload Files!</button> 
    </form> 
</div> 

upload.js

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

    function showUploadedItem (source) { 
     var list = document.getElementById("image-list"), 
      li = document.createElement("li"), 
      img = document.createElement("img"); 
     img.src = source; 
     li.appendChild(img); 
     list.appendChild(li); 
    } 

    if (window.FormData) { 
     formdata = new FormData(); 
    // document.getElementById("btn").style.display = "none"; 
    } 

    button.addEventListener("click", function (evt) { 
     document.getElementById("response").innerHTML = "Uploading . . ." 
     var i = 0, len = this.files.length, img, reader, file; 

     for (; i < len; i++) { 
      file = this.files[i]; 

      if (!!file.type.match(/image.*/)) { 
       if (window.FileReader) { 
        reader = new FileReader(); 
        reader.onloadend = function (e) { 
         showUploadedItem(e.target.result, file.fileName); 
        }; 
        reader.readAsDataURL(file); 
       } 
       if (formdata) { 
        formdata.append("images[]", file); 
       } 
      } 
     } 

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

Answer 1

的index.html

<div id="main"> 
<h1>Upload Your Images</h1> 
<form method="post" enctype="multipart/form-data" action="upload.php"> 
<input type="file" name="images" id="images" multiple /> 
<button type="submit" id="btn">Upload Files!</button> 
</form> 
</div> 

upload.js

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

    function showUploadedItem (source) { 
     var list = document.getElementById("image-list"), 
      li = document.createElement("li"), 
      img = document.createElement("img"); 
     img.src = source; 
     li.appendChild(img); 
     list.appendChild(li); 
    } 

    if (window.FormData) { 

      formdata = new FormData(); 
     formdata = new FormData(); 


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

    $("#btn").click(function (evt) { 


     evt.preventDefault(); 
     document.getElementById("response").innerHTML = "Uploading . . ." 
     var i = 0, len = input.files.length, img, reader, file; 

     for (; i < len; i++) { 
      file = input.files[i]; 

      if (!!file.type.match(/image.*/)) { 
       if (window.FileReader) { 
        reader = new FileReader(); 
        reader.onloadend = function (e) { 
         showUploadedItem(e.target.result, file.fileName); 
        }; 
        reader.readAsDataURL(file); 
       } 
       if (formdata) { 
        formdata.append("images[]", file); 
       } 
      } 
     } 

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