如何在單個按鈕中從單獨的文件夾上傳多個圖像

Question

我正在嘗試使用以下代碼開發諸如Match the following（Image To Image）之類的應用程序，

MyJSp.jsp

<div id="container" >
 <div>
     <span>Question Images</span><br><br>
  <img alt="Image1" id="Image1" src="" width="130px" height="90px"><br><br>
  <img alt="Image2" id="Image2" src="" width="130px" height="90px"><br><br>
  <img alt="Image3" id="Image3" src="" width="130px" height="90px"><br><br> 
  <img alt="Image4" id="Image4" src="" width="130px" height="90px"><br><br>
  <img alt="Image5" id="Image5" src="" width="130px" height="90px"><br><br>
  </div>

  <div>
         <span>Answer Images</span><br><br>
  <img alt="Image6" id="Image6" src="" width="130px" height="90px"><br><br>
  <img alt="Image7" id="Image7" src="" width="130px" height="90px"><br><br>
  <img alt="Image8" id="Image8" src="" width="130px" height="90px"><br><br> 
  <img alt="Image9" id="Image9" src="" width="130px" height="90px"><br><br>
  <img alt="Image10" id="Image10" src="" width="130px" height="90px"><br><br>
  </div>

</div>
<span>Upload Image Questions</span><input type="file"  id="files1" name="files1[]" value="Upload Questions" multiple><br><br>
Upload Image Answers<input type="file"  id="files2" name="files2[]" value="Upload Answers" multiple>

MyJS.js：

$(function(){

document.querySelector('#files1').addEventListener('change', handleFileSelect, false);
    document.querySelector('#files2').addEventListener('change', handleFileSelect2, false);
function handleFileSelect(evt) {
    // alert(); 
        var files = evt.target.files; // FileList object
       // alert("1");
       // Loop through the FileList and render image files as thumbnails.
       for (var i = 0, f; f = files[i]; i++) {

         // Only process image files.
         if (!f.type.match('image.*')) {
           continue;
         }

         var reader = new FileReader();   
         reader.onload = (function(theFile, count) {
               return function(e) {


                        if (count > 5)
                        {
                            alert("You can upload only 5 images.");
                        }
                        else{
                            $('#Image'+count).prop("src",e.target.result);
                            make_visible_ADDDB_Count=make_visible_ADDDB_Count+1;
                        }

               };

             })(f,i+1); 

         // Read in the image file as a data URL.
         reader.readAsDataURL(f);
       }


     // $('.imgclass').draggable();
     }


    //************ Answer Images Here



function handleFileSelect2(evt) {



        var files = evt.target.files; // FileList object
       // alert("1");
       // Loop through the FileList and render image files as thumbnails.
       for (var i = 0, f; f = files[i]; i++) {

         // Only process image files.
         if (!f.type.match('image.*')) {
           continue;
         }

         var reader = new FileReader();   
         reader.onload = (function(theFile, count) {
               return function(e) {

                        if (count > 5)
                        {
                            alert("You can upload only 5 images.");
                        }
                        else{

                            count=count+5;
                            $('#Image'+count).prop("src",e.target.result);




                        }


               };

             })(f,i+1); 

         // Read in the image file as a data URL.
         reader.readAsDataURL(f);
       }


     // $('.imgclass').draggable();
     }




});

通過以上代碼，用戶可以一次上傳5張圖像，但是他們一次很難從單獨的文件夾中添加圖像。 同時，如果它們一個接一個地添加，則所有圖像僅替換在第一個圖像標簽中。

注意：使用ServletFileUpload.isMultipartContent(request)將文件計數插入數據庫非常重要。

那么當使用單個文件上傳按鈕一個接一個地上傳文件時，如何增加文件數量（例如選擇5個，2個或3個文件）呢？

注意：這可能是愚蠢的或不可能的問題，但對我來說非常需要。

這是我的小提琴http://jsfiddle.net/Manivasagam/xbtxzaax/

Answer 1

試試這個http://jsfiddle.net/xbtxzaax/1/

您可以通過單擊行上的圖像來更新行。

nu76