在我的Laravel項(xiàng)目中，我使用通過<input type="file">.在我看來：<input type="file" id="upload_requiremnt_files" name="upload_requiremnt_files[]" multiple><div id="upload_prev"></div>上面的上傳標(biāo)簽位于一個(gè)表單內(nèi)，我從用戶那里獲得了更多數(shù)據(jù)。我使用 提交表單AJAX。從該AJAX函數(shù)中，我將所有數(shù)據(jù)傳遞給控制器。JQuery功能：? ? ? ? var newFileList = [];? ? ? ? $(document).ready(function(readyEvent) {? ? ? ? ? ? $('#upload_requiremnt_files').on('change', function(changeEvent) {? ? ? ? ? ? ? ? $("#upload_prev").html('');? ? ? ? ? ? ? ? var filename = this.value;? ? ? ? ? ? ? ? var lastIndex = filename.lastIndexOf("\\");? ? ? ? ? ? ? ? if (lastIndex >= 0) {? ? ? ? ? ? ? ? ? ? filename = filename.substring(lastIndex + 1);? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? var files = changeEvent.target.files;? ? ? ? ? ? ? ? for (var i = 0; i < files.length; i++) {? ? ? ? ? ? ? ? ? ? $("#upload_prev").append('<span>' + '<div class="filenameupload" id="'+i+'">' + files[i].name + '<p class="close" ><i class="fa fa-window-close" aria-hidden="true"></i></p></div>' + '</span>');? ? ? ? ? ? ? ? }? ? ? ? ? ? });? ? ? ? ? ? $(document).on('click', '.close', function(closeEvent) {? ? ? ? ? ? ? ? console.log(closeEvent);? ? ? ? ? ? ? ? var id = $(this).parent().attr("id");? ? ? ? ? ? ? ? //alert(id);? ? ? ? ? ? ? ? console.log(id);? ? ? ? ? ? ? ? $(this).parents('span').remove();? ? ? ? ? ? ? ? var fileInput = $('#upload_requiremnt_files')[0];? ? ? ? ? ? ? ? newFileList = $('#upload_requiremnt_files')[0].files;? ? ? ? ? ? ? ? newFileList = Array.prototype.slice.call(newFileList);? ? ? ? ? ? ? ? newFileList.splice(id,1);? ? ? ? ? ? ? ? fileInput.files = [];? ? ? ? ? ? });? ? ? ? });一旦我選擇了多個(gè)文件，這些文件就會(huì)列出來。如果我單擊特定文件的刪除圖標(biāo)，它將刪除。單擊提交后，即使我從上傳的文件中刪除了一些文件，所有文件也會(huì)發(fā)送到控制器。但我只需要傳遞那些選定的文件。
1 回答
冉冉說
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊
您需要initially使用函數(shù)將所有文件存儲(chǔ)在一個(gè)數(shù)組中change，然后將刪除圖標(biāo) HTML 數(shù)據(jù)存儲(chǔ)在另一個(gè)數(shù)組中，以匹配fileName我們當(dāng)前在主filesToUpload數(shù)組中的 和 id。
如果文件名與fileName我們當(dāng)前的匹配filesToUpload，我們只需從主數(shù)組和removeFile數(shù)組中拼接該項(xiàng)目即可。
要append關(guān)閉文件icon和文件，data我們可以檢查數(shù)組的長(zhǎng)度removeFile，然后使用函數(shù)附加數(shù)據(jù).join()。
我還添加了一個(gè)實(shí)時(shí)計(jì)數(shù)器。從數(shù)組中刪除文件后檢查剩余的文件數(shù)量filesToUpload。
此外，如果您單擊按鈕，Upload您將看到需要controller以.processingformData
現(xiàn)場(chǎng)演示：（我也為每一行添加了注釋供您參考）
$(document).ready(function(readyEvent) {
var filesToUpload = []; //store files
var removeFile = []; //remove remove files
var fileCounter = 0; //count files
//upload file
$('#upload_requiremnt_files').on('change', function() {
$("#upload_prev").html('');
fileCounter = this.files.length; //count files
//Store all files to our main array
var files = this.files;
for (var i = 0; i < files.length; i++) {
filesToUpload.push(files[i]);
}
//Push file to remove file to that we can match to remove file
for (var i = 0, f; f = files[i]; i++) {
removeFile.push('<div class="filenameupload" id="' + i + '" fileName="' + f.name + '" >' + f.name + '<p class="close" ><i class="fa fa-window-close" aria-hidden="true"></i></p></div>');
}
//Append Remove file icon to each file
if (removeFile.length) {
$("#upload_prev").html(removeFile.join(""));
}
//Show counter
$('#upload_count').show().text('Total Files To Upload = ' + fileCounter)
});
//Remove files
$(document).on('click', '.close', function() {
var i = $(this).parent().attr("id"); //get index
var fileName = $(this).parent().attr("fileName"); //get fileName
//Loop through all the file and remove Files
for (i = 0; i < filesToUpload.length; ++i) {
if (filesToUpload[i].name == fileName) {
//Remove the one element at the index where we get a match
filesToUpload.splice(i, 1);
removeFile.splice(i, 1);
}
}
//Remove file from DOM
$(this).parent().remove();
//Decrease counter
fileCounter--
//Update counter
if (fileCounter > 0) {
$('#upload_count').text('Total Files To Upload = ' + fileCounter)
} else {
$('#upload_count').hide()
}
})
//Demo Upload button
$(document).on('click', '#upload_file', function() {
if (filesToUpload.length) {
alert(filesToUpload.length + ' files will be sent to controller')
} else {
alert('Nothing to upload')
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="file" id="upload_requiremnt_files" name="upload_requiremnt_files[]" multiple>
<div id="upload_count"></div>
<div id="upload_prev"></div>
<br>
<button id="upload_file">Upload</button>
- 1 回答
- 0 關(guān)注
- 167 瀏覽
添加回答
舉報(bào)
0/150
提交
取消