Javascript；多文件上传字段-操作POST(文件输入）

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

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

我想用来实现这一点

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

这一切都很好，但当涉及到单独发送时。。没有可能的办法。

我最初的想法是将（element.files）视为一个数组。。所以我创建了一个重复的表单，并试图将输入复制到另一个表单（成功）

但当我试图拼接或删除不需要的元素以便提交表单时，我找不到方法。什么都没用。。。

试图将element.files.length更改为1，但没有成功试图拼接它没有成功。。试图只清除索引也不起作用。。。

如果有人能发出绿光，或者只是发出超红光，让我知道这在没有html输入的情况下是不可能的，我们将不胜感激。

附言：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;

凹凸