Javascript和多文件上传字段 - 操作POST（文件输入）

Question

我正在开发基于php ajax的应用程序，它的一个组件是图像上传。 我知道ajax无法发布文件，因为它是基于请求的，但我确实发现了一个漂亮的iframe。

我的目标是发送多个文件，但单独发布它们，以便我可以处理上传和验证服务器，发送结果，然后转到下一个文件。

我想与一个来实现这一目标：

<input name="files[]" type="file" multiple=""/> 

它所有的工作都很好，很正常，但是当涉及到单独送他们。有不盛产是一个可行的办法。

我最初的想法是对待（element.files）作为数组..所以我创建重复的形式，并试图在输入复制到其他形式（这是全成）

但是当我试图拼接，或删除不需要的元素，所以我可以提交表单，我找不到办法做到这一点。没有工作...

试图改变element.files.length为1，没有工作 试图拼接它没有工作.. 试图只清除索引也没有工作..

如果任何人都可以摆脱绿灯，或只是爆炸超红灯让我知道这是不可能的w/html输入，它将不胜感激。

p.s：Flash不是一个选项。

这里是我的失败尝试的一些例子：

<form name="image_upload" id="image_upload_form" action="image_uploader" method="POST" enctype="multipart/form-data"> 
    <input name="userfile[]" id="filesToUpload" type="file" title="Select Your Files" multiple=""/> <br /><br /> 
    <input type="button" id="imageUploadButton" value="Upload" onclick="valif('image_upload'); return false;" /> 
</form> 

<!-- Hidden Form and File Input --> 
<form name="single_image_upload" id="single_image_upload_form" action="image_uploader" method="POST" enctype="multipart/form-data"> 
    <input name="userfile[]" id="fileToUpload" type="file" style="visibility: none; position: absolute; top: 0; left: 0;/> 
</form> 

<script type="text/javascript"> 
    //This happens on submit 
    var multi_input = getElementById("image_upload"); 
    var single_input = getElementById("single_image_upload"); 

    single_input = multi_input; 

    //Assuming there are 2+ files chosen for upload, attempt to only upload the first one. 

    //Attempt 1 
    multi_input.files.length = 1; 

    //Attempt 2 
    multi_input.files.splice(1); 

    //Attempt 3 
    for (x = 1; x < multi_input.files.length; x++) { //skip 0, we wanna keep that one 
     multi_input.files[x] = null; // or ''.. same difference in this scneario. 
    } 
</script> 

---

下面是实际的代码，现在，工作瓦特/ 1 IFRAME ....此代码的伟大工程，但它实际上不幸的是每发送单个文件，每一次..我只是在服务器端验证正确的一个，但它不实际，因为我不应该一直发送每一个文件。

function ajaxUpload(form,url_action,id_element){ 
    var detectWebKit = isWebKit(); 

    form = typeof(form)=="string"?$m(form):form; 

    //Error Validator 
    var error=""; 

    if (form==null || typeof(form)=="undefined"){ 
     error += "Invalid Form.\n"; 
    } else if(form.nodeName.toLowerCase()!="form"){ 
     error += "Element Exists but it is not a form.\n"; 
    } 

    if (id_element==null){ 
     error += "The element of 3rd parameter does not exists.\n"; 
    } 

    if (error.length>0){ 
     alert("Error in image upload attempt:\n" + error); 
     return; 
    } 

    //Create Frame On The Fly 
    var iframe = document.createElement("iframe"); 
    iframe.setAttribute("id","ajax-temp-"+rt_img); 
    iframe.setAttribute("name","ajax-temp-"+rt_img); 
    iframe.setAttribute("width","0"); 
    iframe.setAttribute("height","0"); 
    iframe.setAttribute("border","0"); 
    iframe.setAttribute("style","width: 0; height: 0; border: none;"); 
    form.parentNode.appendChild(iframe); 
    window.frames['ajax-temp-'+rt_img].name="ajax-temp-"+rt_img; 

    //Upload Image 
    var doUpload = function(){ 
     removeEvent($m('ajax-temp-'+rt_img),"load", doUpload); 
     var cross = "javascript: "; 
     cross += "window.parent.upload_result(document.body.innerHTML); void(0);"; 

     $m('ajax-temp-'+rt_img).src = cross; 

     if(detectWebKit){ 
      remove($m('ajax-temp-'+rt_img)); 
     }else{ 
      setTimeout(function(){ remove($m('ajax-temp-'+rt_img))}, 250); 
     } 
    } 

    //Post Form 
    addEvent($m('ajax-temp-'+rt_img),"load", doUpload); 
    form.setAttribute("target","ajax-temp-"+rt_img); 
    form.setAttribute("action",url_action); 
    form.setAttribute("method","post"); 
    form.setAttribute("enctype","multipart/form-data"); 
    form.setAttribute("encoding","multipart/form-data"); 

    form.submit(); 
} 

function upload_run() { 
    var send_index = rt_img; 
    rt_img += 1; 

    var li = $('#fileList li:nth-child('+rt_img+')'); 
    var filetype = li.html().substr(-3).toLowerCase(); 
    var skip_mod = ''; 

    //validate file type 
    if ((filetype != 'jpg') && (filetype != 'png') && (filetype != 'gif')) { 
     li.append(' - <b>invalid image file</b>'); 
    } else { 
     li.append(' <img src="'+base_url+'sds_ajax/upload-ani.gif">'); 

     //Initiate File Upload 
     ajaxUpload($m('image_upload_form'),base_url+'includes/core.php?post_action=image_upload&si='+send_index,li); 
    } 
} 



//Get the input and UL list 
     var button = document.getElementById('imageUploadButton'); 
     var input = document.getElementById('filesToUpload'); 
     var list = document.getElementById('fileList'); 

     //Empty list for now 
     while (list.hasChildNodes()) { 
      list.removeChild(ul.firstChild); 
     } 

     //Populate List w/ files 
     rt_max = input.files.length; 
     for (var x = 0; x < input.files.length; x++) { 
      //add to list 
      var li = document.createElement('li');    
      li.innerHTML = 'Image ' + (x + 1) + ': ' + input.files[x].name; 
      list.appendChild(li); 
     } 

     //Run through created list 
     rt_img = 0; 
     upload_run(); 

     //Disable Submit Button 
     button.disabled=true; 

凹凸

Answer 1

这听起来像你需要每个文件上传的iframe。所以我要做的是以正常形式（在每个iframe中）为每个其他字段设置隐藏字段。然后，当您单击提交按钮时，您将获取所有可见的字段，并将值放置在每个图像的相应隐藏字段中。然后调用每个iframe的帖子，现在他们都有他们需要的数据。