我有一个多文件输入。我希望我的客户在点击"选择文件"时选择多个文件(我认为已经完成),如果他们忘记选择一些文件,我希望我代码能够选择新文件(完成),并将该数据添加到他们以前选择的数据中(无法解决)。
如何将新文件追加到列表中?
只是给你一个上下文:之后我的目标是用AJAX将每个文件发送到我的PHP服务器。
$("#upload-form").submit(function(e) {
$('#displayFileNames').html('');
console.log('Currently in files.');
var files = $('#myFileInput')[0].files;
for (var i = 0; i < files.length; i++){
$('#displayFileNames').append(files[i].name + '</br>');
console.log(files[i].name);
}
// Send data with AJAX.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<input id='myFileInput' class='file-input' type='file' name='file[]' multiple='multiple' />
<input type='submit' value="See what's in there" />
</form>
<div id="displayFileNames"></div>
如有任何帮助,我们将不胜感激!
我认为同一个元素不能用于上述用途。这里有一个变通方法。在文件输入上,单击附加另一个文件输入并隐藏当前文件输入。
$("#seebtn").click(function(e) {
$('#displayFileNames').html('');
var domArray = document.getElementsByClassName('file-input');
for (var i = 0; i < domArray.length; i++) {
var files = domArray[i].files;
for (var j = 0; j < files.length; j++){
$('#displayFileNames').append(files[j].name + '</br>');
}
};
// Send data with AJAX.
});
function myFunction(obj) {
$(obj).hide();
$("#upload-form").append("<input class='file-input' type='file' onclick='myFunction(this)' name='file[]' multiple='multiple' />");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="See what's in there" id="seebtn">see</button>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<input id='myFileInput' class='file-input' type='file' name='file[]' onclick="myFunction(this)" multiple='multiple' />
</form>
<div id="displayFileNames"></div>