Как загрузить несколько изображений из отдельной папки в одной кнопке

Question

Я пытаюсь разработать приложение, как Матч следующие (изображения к изображению), используя ниже кода,

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