1
我在這裏知道如何從一個輸入標記添加/上傳/選擇多個文件,但是在再次選擇所有先前的選擇之後被刪除或覆蓋。 我想要的是。如何從一個輸入標籤添加/上傳/選擇多個文件?
- 選擇多個文件。 (將做預覽,確定這是完成)。
- 用戶可以從預覽中刪除選擇。
- 多個文件/圖像添加到當前選擇
我在這裏知道如何從一個輸入標記添加/上傳/選擇多個文件,但是在再次選擇所有先前的選擇之後被刪除或覆蓋。 我想要的是。如何從一個輸入標籤添加/上傳/選擇多個文件?
您可以隱藏輸入[type = file],並提供與輸入,以便選擇新的文件,並單獨管理的文件列表進行交互的UI。
因此,您可以:
1)添加一個隱藏的輸入<input id="myInput" type="file" multiple style="display:none" />
2)提供,爲了打開提示
調用myInput.click()按鈕一個漂亮的UI3)訂閱輸入更改事件並獲取myInput.files並將它們存儲在數組或集合中
4)通過AJAX上傳所有文件只需創建FormData並追加所有文件,然後將FormData實例傳遞給ajax調用(例如:$ ajax({... data:formData ...}))。
編輯:
樣的行爲:
樣本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 => {
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
});
});
});
3)訂閱輸入更改事件並獲取myInput.files並將它們存儲在數組或集合中? 我很擔心。我們如何存儲數組中的文件的引用? 4)通過AJAX上傳所有文件只需創建FormData並追加所有文件,然後將FormData實例傳遞給ajax調用? – AWE
什麼是讓而不是var? – AWE
檢查[這個答案](http://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable)其中很好地描述了這個問題。還要考慮使用const,而不是var。 – andreim