php - Javascript 和多文件上传字段 - 操作 POST(文件输入)

Question

我正在开发一个基于 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;

凹凸

Answer 1

听起来每个文件上传都需要一个 iframe。所以我要做的就是为正常表单中的每个其他字段(在每个 iframe 中)设置隐藏字段。然后，当您单击“提交”按钮时，您将获取所有可见字段并将值放入每个图像的相应隐藏字段中。然后在每个 iframe 上调用 post 因为它们都拥有了所需的数据。