JavaScriptとマルチファイルのアップロードフィールド - 操作（ファイル入力）

Question

私はphp ajaxベースのアプリケーションを開発しており、そのコンポーネントの1つは画像アップロードです。 私はajaxがリクエストをベースにしているので、ファイルを投稿できないことを知っていますが、うまくいくiframeを見つけることはできませんでした。

私の目標は、複数のファイルを送信することですが、アップロードを処理してサーバサイドを検証し、結果を送信してから次のファイルに移動できるように、個別に投稿します。

私はこれを達成したいと思います：

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

それはすべてが、すべての罰金とダンディ動作しますが、それはそれらを個別に送信することになると...可能な方法があるように富むものではありません。

私のオリジナルのアイデアが...配列として（element.files）を治療することでしたので、私は重複したフォームを作成し、他のフォームに入力をコピーしようとした（つまり、成功した）

が、その後私はスプライスしようとするか、不要な要素を削除するので、私はフォームを提出することができます、私はそれを行う方法を見つけることができませんでした。何も働いていない...

1にelement.files.lengthを変更しようとすると、 はそれがうまくいきませんでしたスプライスしようとすると動作しませんでした。.. だけインデックスはどちらか動作しませんでしたクリアしようとすると...

誰かが緑色の光を放つことができ、または赤色の光を爆発させて、これが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 wが働いて、今実際のコードです....このコードは素晴らしい作品、しかし、それは実際には、残念ながら、すべての送信します単一のファイル、毎回..そして、私はちょうどserversideの右のものを検証するが、私は毎回すべてのファイルを送信する必要はありませんので、実用的ではありません。あなたは、ファイルのアップロードあたりの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でpostを呼び出します。