Jquery多个文件上传者部分

Question

我有一个多文件上传器，最初设计为只有1个上传部分： Codepen Single Upload Section

之后，我需要添加多个上传部分。之后我开始遇到问题： Codepen Multiple Upload Section

在我的网站上，我需要6个上传部分。我一直在尝试的是为每个file-chooser_input设置一个onchange函数。一旦发生变化，它就会执行正常运行所需的所有功能。

示例：

    //jQuery plugin
(function( $ ) {

   $.fn.uploader = function( options ) {
     var settings = $.extend({
       MessageAreaText: "There is no file selected.",
       MessageAreaTextWithFiles: "File list:",
       DefaultErrorMessage: "Failed opening file.",
       BadTypeErrorMessage: "Invalid type of file.",
       acceptedFileTypes: ['pdf', 'jpg', 'gif', 'jpeg', 'bmp', 'tif', 'tiff', 'png','doc', 'docx']
     }, options );

     var uploadId = 1;
     //update the messaging 
      $('.file-uploader__message-area_section1 p').text(options.MessageAreaText || settings.MessageAreaText);

      $('.file-uploader__message-area_section2 p').text(options.MessageAreaText || settings.MessageAreaText);

     //create and add the file list and the hidden input list

    //when choosing a file, add the name to the list and copy the file input into the hidden inputs
     $('.file-chooser__input_section1').on('change', function(){
     var fileList = $('<ul class="file-list_section1"></ul>');
     var hiddenInputs = $('<div class="hidden-inputs_section1 hidden"></div>');
     $('.file-uploader__message-area_section1').after(fileList);
     $('.file-list_section1').after(hiddenInputs);
        var file = $('.file-chooser__input_section1').val();
        var fileName = (file.match(/([^\\\/]+)$/)[0]);

       //clear any error condition
       $('.file-chooser_section1').removeClass('error');
       $('.error-message').remove();

       //validate the file
       var check = checkFile(fileName);
       if(check === "valid") {

         // move the 'real' one to hidden list 
         $('.hidden-inputs_section1').append($('.file-chooser__input_section1')); 

         //insert a clone after the hiddens (copy the event handlers too)
         $('.file-chooser_section1').append($('.file-chooser__input_section1').clone({ withDataAndEvents: true})); 

         //add the name and a remove button to the file-list
         $('.file-list_section1').append('<li style="display: none;"><span class="file-list__name">' + fileName + '</span><button class="removal-button" data-uploadid="'+ uploadId +'"></button></li>');
         $('.file-list_section1').find("li:last").show(800);

         //removal button handler
         $('.removal-button').on('click', function(e){
           e.preventDefault();

           //remove the corresponding hidden input
           $('.hidden-inputs_section1 input[data-uploadid="'+ $(this).data('uploadid') +'"]').remove(); 

           //remove the name from file-list that corresponds to the button clicked
           $(this).parent().hide("puff").delay(10).queue(function(){$(this).remove();});

           //if the list is now empty, change the text back 
           if($('.file-list_section1 li').length === 0) {
             $('.file-uploader__message-area_section1').text(options.MessageAreaText || settings.MessageAreaText);
           }
         });
         //so the event handler works on the new "real" one
         $('.hidden-inputs_section1 .file-chooser__input_section1').removeClass('file-chooser__input_section1').attr('data-uploadId', uploadId); 

         //update the message area
         $('.file-uploader__message-area_section1').text(options.MessageAreaTextWithFiles || settings.MessageAreaTextWithFiles);

         uploadId++;

       } else {
         //indicate that the file is not ok
         $('.file-chooser_section1').addClass("error");
         var errorText = options.DefaultErrorMessage || settings.DefaultErrorMessage;

         if(check === "badFileName") {
           errorText = options.BadTypeErrorMessage || settings.BadTypeErrorMessage;
         }

         $('.file-chooser__input_section1').after('<p class="error-message">'+ errorText +'</p>');
       }
     });

//REPEAT SECTION 2

}( jQuery ));

//init 

$(document).ready(function(){
  $('.fileUploader').uploader({
    MessageAreaText: "Select a file."
  });
});

它还没有解决，我仍然没有想出如何让6个功能“隔离”并正常工作。我不知道还有什么可以尝试。提前谢谢。

编辑：抱歉，我没有说明问题。问题是在您上传第二个文件后。无论在哪个部分，或者如果删除前一部分，它都会向列表中添加2个字段和2个文件。这将继续，并将更多和更多的文件输入和文件添加到列表中。