我想清除我的表单中的文件输入。

我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。

注意:我希望避免重新加载页面、重置表单或执行AJAX调用。

这可能吗?


当前回答

我改变了类型文本和返回类型文件使用setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}

其他回答

我一直在寻找简单而干净的方法来清除HTML文件输入,上面的答案是伟大的,但没有一个真正回答我在寻找什么,直到我在网络上遇到了一个简单而优雅的方法来做到这一点:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

这一切都要归功于克里斯·科伊尔。

// Referneces var control = $("#control"), clearBn = $("#clear"); // Setup the clear functionality clearBn.on("click", function(){ control.replaceWith( control.val('').clone( true ) ); }); // Some bound handlers to preserve when cloning control.on({ change: function(){ console.log( "Changed" ) }, focus: function(){ console.log( "Focus" ) } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="control"> <br><br> <a href="#" id="clear">Clear</a>

这是我的两分钱,输入文件存储为数组,这里是如何将其为空

document.getElementById('selector').value = []

返回一个空数组,适用于所有浏览器

解决方案

下面的代码是用jQuery编写的。它适用于所有浏览器,并允许保存事件和自定义属性。

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

有关代码和演示,请参阅jsFiddle。

链接

使用jQuery清除<input type='file' /> 如何用JavaScript重置文件输入

不幸的是,上面的答案似乎没有一个涵盖所有的基础——至少在我用普通javascript进行的测试中没有。

.value = null似乎在FireFox, Chome, Opera和IE11(但不是IE8/9/10)上工作 FireFox上的. clonenode(和jQuery中的.clone())似乎复制了.value,因此使克隆毫无意义。

所以这里是我写的香草javascript函数,它可以在FireFox(27和28),Chrome (33), IE (8, 9, 10, 11), Opera(17)…这些是目前可供我测试的唯一浏览器。

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrl参数是文件输入本身,因此该函数将被调用为…

clearFileInput(document.getElementById("myFileInput"));

tl;dr:对于现代浏览器,使用即可

输入。Value = "或输入。Value = null;


旧的回答:

如何:

input.type = "text";
input.type = "file";

我仍然要理解为什么这不能与webkit工作。

无论如何,这适用于IE9>, Firefox和Opera。 webkit的情况是,我似乎无法将其更改回文件。 在IE8中,情况是它抛出一个安全异常。

编辑: 对于webkit, Opera和firefox,这是有效的:

input.value = '';

(用这个建议核对上面的答案)

我将看看是否能找到一种更好、更干净的方法来跨浏览器执行此操作,而不需要GC。

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

适用于大多数浏览器。不工作与IE < 9,这是全部。 在firefox 20, chrome 24, opera 12, IE7, IE8, IE9和IE10上测试。