迷你AJAX文件上传多个上传块

Question

同一页

我使用以下插件上：http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

我的问题是，我在同一页上多个上传实例（例如1头图像2尺图像）

但只有第一个输入的实际工作，另外一个没有，我没有得到一个错误的客户端或服务器端..

如果我谷歌，试图找到一个替代我得到几百万“同时进行多次上传“，这不是我正在寻找的内容。

这里是页面代码：

 <form id='upload' method='post' action='URLtoServerside' enctype='multipart/form-data'> 
      <div id='drop'> 
       Drop Here 

       <a>Browse</a> 
       <input type='file' name='upl' multiple /> 
      </div> 
      <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' /> 

      <ul style='display:none'> 
       <!-- The file uploads will be shown here --> 
      </ul> 
     </form> 

     <form id='upload' method='post' action='URLtoServerside' enctype='multipart/form-data'> 
      <div id='drop'> 
       Drop Here 

       <a>Browse</a> 
       <input type='file' name='upl' multiple /> 
      </div> 
      <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' /> 

      <ul style='display:none'> 
       <!-- The file uploads will be shown here --> 
      </ul> 
     </form> 

PHP代码：

$allowed = array('png'); 

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){ 

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION); 

    if(!in_array(strtolower($extension), $allowed)){ 
     echo '{"status":"error"}'; 
     exit; 
    } 

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'images/'.$name.'.png')){ 
     echo '{"status":"success"}'; 
     exit; 
    } 
} 

echo '{"status":"error"}'; 
exit; 

可有人请要么告诉我如何得到这个多上载在同一页上工作，或者推荐一个替代品。

（我确实需要拖放以及 '浏览' 功能）

Answer 1

<input type="button" name="button" value="添加附件" onclick="addInput()"> 
<span id="upload"></span> 

JS

<script type="text/javascript"> 
    var attachname = "attach"; 
    var i=1; 
     function addInput(){ 
     if(i>0){ 
       var attach = attachname + i ; 
       if(createInput(attach)) 
        i=i+1; 
      } 

     } 
     function createInput(nm){ 
      var aElement=document.createElement("input"); 
     aElement.name=nm; 
     aElement.id=nm; 
     aElement.type="file"; 
     aElement.size="50"; 
     if(document.getElementById("upload").appendChild(aElement) == null) 
       return false; 
     return true; 
     } 

Answer 2

我刚来到这个问题。

我的解决办法：

我复制从miniupload与script2.js或任何的script.js。 在该脚本中，我所做的唯一工作是将名称从上传更改为upload_files，然后放到drop_files中。 像这样：

var ul = $('#upload_files ul'); 

    $('#drop_files a').click(function(){ 
     // Simulate a click on the file input button 
     // to show the file browser dialog 
     $(this).parent().find('input').click(); 
    }); 

    // Initialize the jQuery File Upload plugin 
    $('#upload_files').fileupload({ 
    (...) 

我的HTML：

<form id="upload" method="post" enctype="multipart/form-data"> 
           <div id="drop" style="text-align:center ;align-content:center"> 
            Add images 
            <a>Select</a> 
            <input type="file" name="upl" multiple /> 
           </div> 
           <ul> 
            <!-- The img uploads will be shown here --> 
           </ul> 
          </form> 


<form id="upload_files" method="post" enctype="multipart/form-data"> 
           <div id="drop_files" style="text-align:center ;align-content:center"> 
            Add files 
            <a>Select</a> 
            <input type="file" name="upl_file" multiple /> 
           </div> 
           <ul> 
            <!-- The file uploads will be shown here --> 
           </ul> 
          </form> 

然后修改CSS了。 原来的CSS是这样的：

#upload{ 
    font-family:'PT Sans Narrow', sans-serif; 
    background-color:#373a3d; 

    background-image:-webkit-linear-gradient(top, #373a3d, #313437); 
    background-image:-moz-linear-gradient(top, #373a3d, #313437); 
    background-image:linear-gradient(top, #373a3d, #313437); 

    width:250px; 
    padding:30px; 
    border-radius:3px; 

    margin:20px 20px 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 
} 

我添加代码，以反映upload_files

#upload_files{ 
    font-family:'PT Sans Narrow', sans-serif; 
    background-color:#373a3d; 

    background-image:-webkit-linear-gradient(top, #373a3d, #313437); 
    background-image:-moz-linear-gradient(top, #373a3d, #313437); 
    background-image:linear-gradient(top, #373a3d, #313437); 

    width:250px; 
    padding:30px; 
    border-radius:3px; 

    margin:20px 20px 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 
} 

它不是一个 “干净” 的解决方案，但它的工作原理:)

Answer 3

我是有这个问题很长一段时间，直到我想我会解决它。这就是我所做的。

在表格中，我添加了#upload和#drop元素的类。我改名为他们#upload1，#upload2和#drop1，#drop2

<form id="upload1" class="upload" method="post" action="upload.php" enctype="multipart/form-data"> 
    <div id="drop1" class="drop"> 
... 

在JS侧（脚本。JS），我裹在适当的jQuery初始化整个事情和我说每一个jQuery的顶部和包裹在这整个主区域：

(function($){ 
    $('.upload').each(function (_key, _value) { 
     var $this = $(this); 
     var ul = $this.find('ul'); 

     $this.find('#drop a').click(function(){ 
     ... 
    }); 

})(jQuery); 

我也被替换的#upload所有实例$this和所有实例#drop与$this.find('.drop')

基本上，你用类名替换id，并相应地调整你的脚本，然后把它全部包装在一个大的循环中。

PS。我也想给我的脚本文件添加一个完整的回调函数，这样我就可以完成所有事情。

complete:function() { 
}, 

请让我知道这是否适合你。

UPDATE： 修改代码来动态工作：

(function($){ 
$(document).ready(function(){ 



    $(document).on('click','.drop a', function(){ 

     var $drop = $(this); 
     var $this = $drop.closest('.upload'); 
     var ul = $this.find('ul'); 

     $this.parent().find('input').click(); 
     //console.log($this.find('.drop')); 
    }); 


    window.init_file_upload = function($element) { 

     // Initialize the jQuery File Upload plugin 
     $($element).fileupload({ 

      //var $this = $(this); 
      // This element will accept file drag/drop uploading 
      dropZone: $element.find('.drop'), 
      // This function is called when a file is added to the queue; 
      // either via the browse button, or via drag/drop: 
      add: function (e, data) { 

       ul = $element.find('ul'); 
       //console.log('adsf'); 
       $('.ajaxform button.submit').attr('disabled','disabled'); 
       var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+ 
        ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span><i class="fa fa-check-circle-o"></i> OK</span></li>'); 

       // Append the file name and file size 
       tpl.find('p').text(data.files[0].name) 
          .append('<i>' + formatFileSize(data.files[0].size) + '</i>'); 

       // Add the HTML to the UL element 
       ul[0].innerHTML = ''; 
       data.context = tpl.appendTo(ul); 

       // Initialize the knob plugin 
       tpl.find('input').knob(); 

       // Listen for clicks on the cancel icon 
       tpl.find('span').click(function(){ 

        if(tpl.hasClass('working')){ 
         jqXHR.abort(); 
        } 

        tpl.fadeOut(function(){ 
         tpl.remove(); 
        }); 

       }); 

       // Automatically upload the file once it is added to the queue 
       var jqXHR = data.submit(); 
      }, 

      progress: function(e, data){ 

       // Calculate the completion percentage of the upload 
       var progress = parseInt(data.loaded/data.total * 100, 10); 

       // Update the hidden input field and trigger a change 
       // so that the jQuery knob plugin knows to update the dial 
       data.context.find('input').val(progress).change(); 

       if(progress == 100){ 
        data.context.removeClass('working'); 
       } 
      }, 

      complete:function(e, data) { 
       // console.log(e,data); 
       var _data = $.parseJSON(e.responseText); 
       // console.log(_data); 
       postAjax(_data); 
       $('.ajaxform button.submit').removeAttr('disabled'); 
      }, 

      fail:function(e, data){ 
       // Something has gone wrong! 
       data.context.addClass('error'); 
      } 

     }); 
    } 
    $('.upload').each(function() { 
     window.init_file_upload($(this)); 

    }); 
    // Simulate a click on the file input button 
    // to show the file browser dialog 


    // Prevent the default action when a file is dropped on the window 
    $(document).on('drop dragover', function (e) { 
     e.preventDefault(); 
    }); 

    // Helper function that formats the file sizes 
    function formatFileSize(bytes) { 
     if (typeof bytes !== 'number') { 
      return ''; 
     } 

     if (bytes >= 1000000000) { 
      return (bytes/1000000000).toFixed(2) + ' GB'; 
     } 

     if (bytes >= 1000000) { 
      return (bytes/1000000).toFixed(2) + ' MB'; 
     } 

     return (bytes/1000).toFixed(2) + ' KB'; 
    } 

}); 
})(jQuery);