函数重置图像字段（） { var $el = $（'#uploadCaptureInputFile'）; $el.wrap（'<form>'）.closest（'form'）.get（0）.reset（）; $el.解包（）; } <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <input type=“file” id=“uploadCaptureInputFile” class=“win-content colors” accept=“image/*” /> <按钮点击=“重置图像字段（）”>重置字段</button>

重置文件上传按钮是如此容易使用纯JavaScript!

有几个方法可以做到这一点，但必须直接的方法，这是在许多浏览器工作良好的改变文件值为零，这样上传文件得到重置，也尝试使用纯javascript而不是任何框架，我创建了下面的代码，检查一下(ES6):

函数resetFile() { const file = document.querySelector('.file'); 文件。Value = "; ｝ <input type="file" class="file" /> <按钮onclick = " resetFile ()“>重置文件> < /按钮

我在这里错过了另一个解决方案(2021年): 我使用FileList与文件输入交互。

因为没有办法创建FileList对象，所以我使用DataTransfer，它带来了干净的FilleList。

我用:

  file_input.files=new DataTransfer().files  

在我的例子中，这非常适合，因为我只通过FileList与封装的文件输入元素进行交互。

在IE 10中，我解决了这个问题:

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

地点:

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>

也适用于动态控制。

Javascript

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});

只使用:

$('input[type=file]').val('');