添付された複数のファイルjquery

Question

複数の画像をアップロードするには、multipleを入力領域に含めました。 2番目の画像をアップロードすると、最初に添付された画像が削除されます。

<input name="images_post[]" id="files_post" size="27" type="file" multiple /> 

。

<input name="typeattach" type="hidden" id="typeattach" value="0"></span> 

jQの

  $('#files_post').click(function() {      
       $('#typeattach').val('1'); 
       $('#atach-value').val(''); 
      }); 

      $(':file').change(function() { 
       $('#num-files').text(this.files.length); 
      }); 

htmlの最初のファイルが添付されて

<span id="num-files">0</span> 

、私は...突然行方不明の最初のファイルを第二のファイルを添付。

Answer 1

inputに複数のファイルを受け入れるには、そのエンコーディングタイプとしてフォームをmultipart/form-dataにする必要があります。次に、複数のファイルを選択することができます。あなたがしようとしている場合...その答えの既に受け入れた場合でも、単に完全性のため

var input = document.getElementById('filesToUpload'); 
var list = document.getElementById('fileList'); 

// Clears the file list if it currently has child nodes. 
while (list.hasChildNodes()) { 
    list.removeChild(ul.firstChild); 
} 

// For each file... 
for (var x = 0; x < input.files.length; x++) { 
    // ...Add it to the ul as a li element. 
    var li = document.createElement('li'); 

    li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
    list.append(li); 
} 

：ここ

<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> 
<form method="post" action="upload-page.php" enctype="multipart/form-data"> 
    <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> 
</form> 

<ul id="fileList"></ul> 

は、これらの複数のファイルを扱うテストするスクリプトですファイル選択プロンプトを複数回開くことができるようにして、複数のファイルを選択することができます。その後、少しハッキリしなければなりません。私は信じていますが（私には言わないでください）、セキュリティのために複数のファイルプロンプトからファイルを選択することはできません。あなたが最初のプロンプトの後に、アップロード用のファイルのリストを維持したい場合は、我々はする必要があります。

• は
• 、ファイルの選択が行われた後の選択でinputを非表示にすることで、現在選択されたファイルを隠します連続してアップロードするために現在のinputを再作成します。
• 他の方法でファイルの累積リストを表示します。
• フォームが送信されるとすべての隠し入力をアップロードします。

ような何か：HTMLのための

// Handles immediately after a file is selected 
$("input#files_post").change(function() { 
    var inputClone = this.clone(); 

    // Add to (hidden) list. 
    inputClone.appendTo("#file-catalog"); 

    // Reset element 
    this.remove(); 
    inputClone.appendTo("#file-upload-form"); 
}); 

// Handles what is uploaded on form submission 
$("file-upload-form").submit({ 
    // Get only the file-catalog elements, serialise for upload. 
    var fileParams = $("#file-catalog").find("*:form").serialize(); 

    $.ajax({ 
     url: 'http://dot.com/', 
     type: 'POST', 
     data: params, 
     success: function (data) { 
      console.log("Success! Info: " + data); 
     } 
    }); 
}); 

：

<form id="file-upload-form"> 
    <input name="images_post[]" id="files_post" size="27" type="file" multiple /> 
    <div id="file-catalog" display="none"></div> 
</div> 

そして、あなたが一覧表示したい場合、私はあなたにお任せしますいくつかの版で、オリジナルの答えのJSを利用隠しファイルおそらくすべてのボタンをクリアしてもよいでしょう。

$(".clear-button").click(function() { 
    $("#the-list-you-made-on-the-advice-above").empty(); 
    $("#file-catalog").empty(); 
}