Question

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

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

我想通过以下方式实现这一目标：

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

这一切都很好，花花公子，但是当涉及到单独发送它们时，并不是一种可能的方式。

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

但是当我试图拼接或删除不需要的元素以便我可以提交表单时，我找不到办法来做到这一点。什么都没有用......

尝试将element.files.length更改为1，不起作用试图拼接它不起作用.. 试图清除索引也不起作用......

如果有人可以开绿灯，或者只是爆破超红灯让我知道这是不可能的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>

下面是现在的实际代码，工作w / 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，因为他们都拥有所需的数据。

Javascript＆amp;多文件上载字段 - 操作POST（文件输入）

1 个答案: