多個文件輸入HTML工作不

我已經爲多個文件輸入以下代碼多個文件輸入HTML工作不

<form action="" enctype = "multipart/form-data" method="post" name="login"> 

<input type = "file" name = "photo[]" id = "files" multiple onchange = "handleFileSelect(this.files)"/><br/> 
<div id="selectedFiles"></div> 
<input type="submit" value="Sign In"> 
</form>

JavaScript的等效功能。

selDiv = document.querySelector("#selectedFiles"); 
function handleFileSelect(e) { 
    if(!this.files) return; 

    selDiv.innerHTML = ""; 

    var files = e; 
    for(var i=0; i<files.length; i++) { 
     var f = files[i]; 
     selDiv.innerHTML += f.name + "<br/>"; 

    } 

}

我得到的是上傳第二個文件。 FileList被覆蓋，而不是有2個文件，第二個文件存在於FileList中。這裏FileList由this.files傳遞。

同樣在傳遞給服務器時，只傳遞第二個映像。我用google搜索，但找不到答案。如果有人能幫忙，我將不勝感激。

來源

2016-07-24 Ritesh Jung Thapa

其實這就是它的工作原理。當使用屬性爲「multiple」的HTML文件元素時，用戶必須使用shift或control click來選擇他們想要一次上傳的所有文件。如果您選擇一個，然後關閉對話框，然後返回並選擇另一個，它將替換先前選擇的文件。 – bloodyKnuckles

唉謝謝你的信息。但是沒有任何方法可以多次上傳用戶文件。 –

我遇到了同樣的問題。感謝您的問題和答案。我設法通過向DOM輸入類型的文件，並委派點擊分離的元素添加多個文件：

<form method="POST" enctype="multipart/form-data" action="/echo/html"> 
    <button class="add"> 
    Add File 
    </button> 
    <ul class="list"> 
    </ul> 
    <button> 
     Send Form 
    </button> 
</form>

使用JavaScript：

$('form button.add').click(function(e) { 
    e.preventDefault(); 
    var nb_attachments = $('form input').length; 
    var $input = $('<input type="file" name=attachment-' + nb_attachments + '>'); 
    $input.on('change', function(evt) { 
     var f = evt.target.files[0]; 
     $('form').append($(this)); 
     $('ul.list').append('<li class="item">'+f.name+'('+f.size+')</li>'); 
    }); 
    $input.hide(); 
    $input.trigger('click'); 
});

它正在與邊緣，鉻50火狐45，但我不知道與舊版本或其他瀏覽器的兼容性。

查看this fiddle。

來源

2016-07-27 11:05:54

其實這就是如何使用multiple屬性輸入的HTML文件的作品。用戶必須使用移位或控制點擊一次選擇他們想要一次上傳的所有文件。

爲了讓您的網站用戶多次使用HTML文件輸入元素並保留所有以前的選擇，您需要在每次使用文件元素時將收到的文件base64數據寫入隱藏的表單元素。

<form action="process.php" method="post" name="uploadform" enctype="multipart/form-data"> 
    // other form elements if needed 
    <input type="submit"> 
</form> 

<!-- outside the form, you don't want to upload this one --> 
<input type="file" id="upfiles" name="upfiles"> 

<script> 

    document.getElementById('upfiles').addEventListener('change', handle_files, false); 

    function handle_files(evt) { 

    var ff = document.forms['uploadform']; 
    var files = evt.target.files; 

    for (var i = 0, file; file = files[i]; i++) { 

     var reader = new FileReader(); 

     reader.onload = (function(file) { 
     return function (ufile) { 
      var upp = document.createElement('input'); 
      upp['type'] = 'hidden'; 
      upp['name'] = +new Date + '_upfile_' + file.name.replace(/(\[|\]|&|~|!|\(|\)|#|\|\/)/ig, ''); 
      upp.value = ufile.target.result; 
      ff.appendChild(upp); 
     } 
     }(file)); 

     reader.readAsDataURL(file); 
    } 
    } 
</script>

接下來，您需要編寫腳本以在服務器上運行以處理隱藏的base64字段。如果使用PHP，您可以：

<?php 

$path = 'path/to/file/directory/'; 
// this is either: 
// - the absolute path, which is from server root 
//  to the files directory, or 
// - the relative path, which is from the directory 
//  the PHP script is in to the files directory 

foreach ($_POST as $key => $value) { // loop over posted form vars 
    if (strpos($key, '_upfile_')) { // find the file upload vars 
    $value = str_replace(' ', '+', $value); // url encode 
    file_put_contents($path.$key, base64_decode($value)); 
    // convert data to file in files directory with upload name ($key) 
    } 
} 

?>

來源

2016-07-24 17:48:32 bloodyKnuckles

多個文件輸入HTML工作不

回答

相關問題