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

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

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

这可能吗?


当前回答

有3种方法用javascript清除文件输入:

将value property设置为空或空。 适用于IE11+和其他现代浏览器。 创建一个新的文件输入元素并替换旧的输入元素。 缺点是您将失去事件侦听器和expando属性。 通过form. Reset()方法重置所有者表单。 为了避免影响同一所有者表单中的其他输入元素,我们可以创建一个新的空表单,并将文件输入元素附加到这个新表单并重置它。这种方法适用于所有浏览器。

我写了一个javascript函数。演示:http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

其他回答

输入。Value = null是一个工作方法,但是如果从onclick事件调用它,它只会触发输入的change事件。

解决方案是在需要重置输入时手动调用onchange处理程序。

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);

这对我很管用。

const clear = (event) =>{event.target.value = [ ];}
clear("input_id"); 

这其实很简单。

document.querySelector('#input-field').value = '';

帮助我的是,我尝试使用循环获取和上传最后选择的文件,而不是清除队列,它工作。这是代码。

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

希望这能对你有所帮助。

不幸的是,上面的答案似乎没有一个涵盖所有的基础——至少在我用普通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"));