如何从多个输入类型文件中删除特定文件? [英] How to delete a specific file from input type file multiple?
问题描述
我正在使用多个输入类型文件来更新一些图片.上传之前,页面会显示每张照片的缩影.我想为每张图片做一个删除链接,当用户单击时,图片消失,文件从输入中删除.
I'm using a input type file multiple to update some pictures. Before upload, the page shows a miniature of each picture. I would like to do a remove link to each picture, and when the user clicks, the picture disapear and the file is removed from input.
我尝试在下面使用此代码:
I try to use this code below:
HTML:
<input id="midiasUpload" multiple="multiple" type="file" name="midias" accept="image/x-png,image/gif,image/jpeg" />
<div id="midiaDigital"></div>
JavaScript:
Javascript:
$(document).ready(function() {
$("#midiasUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#midiaDigital");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++)
{
var reader = new FileReader();
reader.onload = function(e) {
$(image_holder).append('<div class="form-group row">' +
'<div>' +
'<div class="col-md-6">' +
'<img src="' + e.target.result + '" class="thumb-image img-responsive">' +
'<input type="text" class="form-control input-sm" name="midiaDigitals[' + i + '].legenda" placeholder="Digite a descrição da mídia digital"/>' +
'<a href="#" class="remove_field1">Remover</a>' + //add input box
'</div>' +
'</div>' +
'</div>');
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("O browser não suporta upload de arquivos.");
}
} else {
alert("Formato de arquivo inválido");
}
});
$(midiaDigital).on("click",".remove_field1", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
})
});
使用此代码,预览"图片显示为删除"链接.当我单击删除"时,预览图片被删除,但文件继续被选择.我该怎么办?
Using this code, the "preview" pictures appear with the "remove" link. When I click in the "remove", the preview picture are deleted, but the file continues selected. What should I do?
推荐答案
您可以简单地通过jQuery在$('#midiasUpload').val('');
行中完成此操作.重置输入值.这是代码段:
You can do it simply via jQuery in one line: $('#midiasUpload').val('');
. It resets input value. Here is the snippet:
function select(el) {
img = el;
}
var img;
var input;
$(document).ready(function() {
$("#midiasUpload").on('change', function() {
var countFiles = $(this)[0].files.length;
input = $(this)[0];
console.log('Input value after upload: ', input.value)
var imgPath = input.value;
img = imgPath;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#midiaDigital");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$(image_holder).append('<div class="form-group row">' +
'<div>' +
'<div class="col-md-6">' +
'<img src="' + e.target.result + '" class="thumb-image img-responsive" onclick="select($(this))">' +
'<input type="text" class="form-control input-sm" name="midiaDigitals[' + i + '].legenda" placeholder="Digite a descrição da mídia digital"/>' +
'<a href="#" class="remove_field1">Remover</a>' + //add input box
'</div>' +
'</div>' +
'</div>');
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("O browser não suporta upload de arquivos.");
}
} else {
alert("Formato de arquivo inválido");
}
});
$(midiaDigital).on("click",".remove_field1", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
img.val = '';
input.value = null;
console.log('Input value after remove: ', input.value)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="midiasUpload" multiple="multiple" type="file" name="midias" accept="image/x-png,image/gif,image/jpeg" />
<div id="midiaDigital" style="margin-bottom: 100px;"></div>
这篇关于如何从多个输入类型文件中删除特定文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!