篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text js - jquery - html -add - 删除文件输入文件相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Document</title>
</head>
<body>
<input onchange="handleChange(this)" id="file" type="file" />
<div id="files"></div>
<a href="#" id="show">Показать form data</a>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
const Store = {
files: [], // какое-то хранищие файлов, для примера так
}
// при выборе файлов, мы будем их добавлять
function handleChange(e) {
// если не выбрали файл и нажали отмену, то ничего не делать
if (!e.files.length) {
return;
}
// создаем новый массив с нашими файлами
const files = Object.keys(e.files).map((i) => e.files[i]);
addFiles(files); //добавляем файлы в хранилище
// очищаем input, т.к. файл мы сохранили
e.value = '';
showFiles();
}
function addFiles(files) {
// добавляем файлы в общую кучу
Store.files = Store.files.concat(files);
}
// удалить файл из хранилища, например по индексу в массиве
function removeFile(index) {
// удаляем файл по индексу
Store.files.splice(index, 1);
showFiles();
}
// если надо послать файлы на сервер, формируем FormData с файлами
// const formData = getFilesFormData(Store.files);
function getFilesFormData() {
var formData = new FormData();
$.each(Store.files, function(i, v) {
formData.append(`file${i + 1}`, v);
});
return formData;
}
function showFiles()
{
var files = '';
$.each(Store.files, function(i, v) {
files += '<p>' + v.name + ' <a href="javascript:void(0)" onclick="removeFile(' + i + ')"><span class="fa fa-remove"></span></a></p>';
});
$('#files').html(files);
}
$('#show').click(function( e ) {
e.preventDefault();
var formData = getFilesFormData();
for (var value of formData.values()) {
console.log(value);
}
});
</script>
</body>
</html>
//http://jsfiddle.net/xg21yajn/
以上是关于text js - jquery - html -add - 删除文件输入文件的主要内容，如果未能解决你的问题，请参考以下文章