我来这里是为了了解如何从一个输入标签中添加/上传/选择多个文件，但在再次选择之后，所有先前的选择都被删除或覆盖。 我想要的是。
- 选择多个文件。 (将进行预览，好的，完成了)。
- 用户可以从预览中的选择中删除。
- 向当前选择添加更多文件/图像
最佳答案
您可以隐藏输入 [type=file] 并提供与输入交互的 UI，以便选择新文件并单独管理文件列表。
所以你可以:
添加隐藏输入
<input id="myInput" type="file" multiple style="display:none" />提供一个美观的用户界面，其中包含一个调用 myInput.click() 以打开提示的按钮
订阅输入更改事件并获取myInput.files并将它们存储在数组或集合中
要通过 AJAX 上传所有文件，只需创建一个 FormData 并附加所有文件，然后将 FormData 实例传递给 ajax 调用(例如:$ajax({...data: formData...}))。
已编辑:
示例行为:
- 按“+ 添加文件”按钮会将新文件添加到列表中。
- 单击列表中的文件将删除该文件
- 点击“发送文件”按钮会将文件发送到相应的URL
示例 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<input id="myInput" type="file" multiple style="display:none" />
<button id="myButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">+ Add Files</button>
<button id="mySubmitButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">Send Files</button>
<div id="myFiles"></div>
</body>
</html>
示例脚本:
$(function(){
let inputFile = $('#myInput');
let button = $('#myButton');
let buttonSubmit = $('#mySubmitButton');
let filesContainer = $('#myFiles');
let files = [];
inputFile.change(function() {
let newFiles = [];
for(let index = 0; index < inputFile[0].files.length; index++) {
let file = inputFile[0].files[index];
newFiles.push(file);
files.push(file);
}
newFiles.forEach(file => {
let fileElement = $(`<p>${file.name}</p>`);
fileElement.data('fileData', file);
filesContainer.append(fileElement);
fileElement.click(function(event) {
let fileElement = $(event.target);
let indexToRemove = files.indexOf(fileElement.data('fileData'));
fileElement.remove();
files.splice(indexToRemove, 1);
});
});
});
button.click(function() {
inputFile.click();
});
buttonSubmit.click(function() {
let formData = new FormData();
files.forEach(file => {
/* here I just put file as file[] so now in submitting it will send all
files */
formData.append('file[]', file);
});
console.log('Sending...');
$.ajax({
url: 'https://this_is_the_url_to_upload_to',
data: formData,
type: 'POST',
success: function(data) { console.log('SUCCESS !!!'); },
error: function(data) { console.log('ERROR !!!'); },
cache: false,
processData: false,
contentType: false
});
});
});
关于javascript - 如何从一个输入标签添加/上传/选择多个文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43349767/