如何从一个输入标签添加/上传/选择多个文件？ [英] How to add/upload/choose multiple files from one input tag?
问题描述
我在这里知道如何从一个多个输入标签添加/上传/选择多个文件，但是在再次选择所有之前的选择之后被删除或覆盖。
我想要的是什么。
- 选择多个文件。 （会进行预览，确定完成）。
- 用户可以从预览中删除选项。
- 将更多文件/图像添加到当前选择
您可以隐藏输入[type = file]并提供一个与输入以便选择新文件并单独管理一个文件列表。
所以你可以：
1 ）添加一个隐藏的输入< input id =myInputtype =filemultiple style =display：none/>
2）用一个调用myInput.click（）的按钮提供一个好看的用户界面，以便打开提示
3）订阅输入更改事件并获取myInput.files并将它们存储在数组或集合中
4）通过AJAX上传所有文件只需创建FormData并追加所有文件将FormData实例传递给ajax调用（例如：$ ajax（{... data：formData ...}））。
编辑：
示例行为： 示例HTML：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< title>< / title>
< link rel =stylesheethref =style.css/>
< script src =script.js>< / script>
< / head>
< body>
< input id =myInputtype =filemultiple style =display：none/>
< button id =myButtontype =buttonstyle =border-radius：5px; background-color：#fff; color：green;> +添加文件< / button> ;
< button id =mySubmitButtontype =buttonstyle =border-radius：5px; background-color：#fff; color：green;>发送文件< / 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）;
$ b $ 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 => {
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
}）;
}）;
}）;
I am here to know that How to add/upload/choose multiple files from one input tag that is multiple but after selecting again all previous selection were removed or override. what I want is.
- selection of multiple files. (will make preview, ok this is done).
- user can remove from selection from preview.
- add more files/image to current selection
You can hide the input[type=file] and provide an UI that interacts with the input in order to select new files and manage separately a list of files.
So you can:
1) add a hidden input <input id="myInput" type="file" multiple style="display:none" />
2) Provide a good looking UI with a button that calls the myInput.click() in order to open the prompt
3) subscribe to input change event and get the myInput.files and store them in an array or collection
4) to upload all files via AJAX just create a FormData and append all the files then pass FormData instance to the ajax call (eg: $ajax({...data: formData...})).
EDITED:
Sample Behavior:
- Pressing "+ Add Files" button will add new files to the list.
- Clicking a file in the list will remove the file
- Pressing "Send Files" button will send the files to the corresponding URL
Sample 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>
Sample Script:
$(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 => {
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
});
});
});
这篇关于如何从一个输入标签添加/上传/选择多个文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
