Прикрепленный файл jquery

Question

Как загрузить несколько изображений, я включил multiple в область ввода. При загрузке вторых изображений первый прикрепленный файл удаляется.

<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. Затем вы можете выбрать несколько файлов.

<!-- 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> 

Вот скрипт, чтобы проверить обработку этих нескольких файлов:

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); 
} 

Просто для полноты картины, даже если ответ-х принял уже ...

Если вы пытаетесь сделайте так, чтобы приглашение выбора файла можно было открыть несколько раз, тогда можно выбрать несколько файлов, тогда вы должны быть немного взломаны. Я считаю, что (не цитирую меня), вы не можете выбирать файлы из нескольких подсказок из-за безопасности. Если вы хотите сохранить список файлов для загрузки после первой строки, то мы должны:

• Скрыть текущие выбранные файлы, скрывая input с выбором после того, как выбор файлов было сделано,
• Восстановить текущий input для последовательных загрузок,
• Показать кумулятивный список файлов каким-либо другим способом,
• Загрузите все скрытые входы после отправки формы.

Что-то вроде:

// 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); 
     } 
    }); 
}); 

для HTML:

<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(); 
}