![](/img/trans.png)
[英]jQuery Example: Reseting an input file element in case of non-allowed file-extensions
[英]JQuery File Upload Not Reseting
我有一個多文件上傳解決方案,單擊“重置”按鈕后不會清除文件。 查看JSFIDDLE演示解決方案。 這是HTML:
<form id="ImageUpload" action="#">
<div class="field" align="left">
<h2 class="page-header">Upload your images</h3>
<div class="form-group">
<div class="file-loading">
<input type="file" id="files" name="files[]" multiple />
</div>
</div>
</div>
<hr />
<div class="text-center">
<button type="submit" name="Submit" class="btn btn-success">Submit</button>
<button type="reset" name="Reset" class="btn btn-danger">Reset</button>
</div>
</form>
這是Javascript:
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
理想的結果是不僅清除所選文件的數量(“選擇文件”按鈕),而且清除預覽圖像。
當按下“重置”按鈕時,下面顯示的體驗是預期的結果。
我將不勝感激,謝謝!
向您的重置按鈕單擊添加功能。
$("button[name='Reset']").click(function() {
var $input = $("#files");
// Clear your input file value
$input.replaceWith($input.val('').clone(true));
// Then clear the preview of the images
$('.pip').html('');
});
您需要為“重置”按鈕單擊事件添加功能。 您可以執行以下操作:
$(document).on('click', '[name=Reset]', function(){
$('.pip').remove();
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.