如何用JavaScript清除HTML文件输入?

document.getElementById('your_input_id').value=''

你需要用新的文件输入替换它。 下面是如何用jQuery完成的:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

当你需要清除输入字段时使用这一行(例如在某些事件上):

inputFile.parent().html( inputFile.parent().html() );

博士tl;:对于现代浏览器，使用即可

input.value = ''或input.value = null;

旧的回答:

如何:

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

我仍然需要理解为什么这个不与webkit一起工作。

<强>编辑: 对于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上测试

将值设置为''并不适用于所有浏览器。

相反，尝试将值设置为null，如下所示:

document.getElementById('your_input_id').value= null;

上述答案提供了一些笨拙的解决方案，原因如下:

1. 我不喜欢必须先wrap input，然后获取html，这是非常复杂和肮脏的。

2. 跨浏览器JS很方便，在这种情况下，似乎有太多的未知，无法可靠地使用type切换(这也有点脏)并将value设置为''

因此，我为您提供了基于jQuery的解决方案:

$('#myinput').replaceWith($('#myinput').clone())

它说什么就做什么，它用自己的克隆来替换输入。克隆文件不会被选中。

优点:

1. 简单易懂的代码
2. 没有笨拙的包装或类型切换
3. 跨浏览器兼容性(如果我说错了请指正)

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

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

1. < p > 将value property设置为空或空。

   适用于IE11+和其他现代浏览器

2. < p > 创建一个新的文件输入元素并替换旧的输入元素。

   缺点是你将失去事件监听器和expando属性

3. < p > 通过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);
}
}
}

解决方案

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

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

演示

代码和演示参见这jsFiddle。

链接

• clear <input type='file' />使用jQuery < / >

• 如何用JavaScript重置文件输入

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

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


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

所有的功劳都归于克里斯Coyier。

// 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>

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

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);
}

希望这能对你有所帮助。

我也有同样的问题，我想出了这个。

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';


document.querySelector('button').onclick = function(){
file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

我尝试了大多数的解决方案，但似乎没有人工作。然而，我在下面找到了一个散步的地方。

表单的结构是:form => label， input和submit button。在我们选择了一个文件之后，该文件名将通过在JavaScript中手动执行的操作由标签显示。

所以我的策略是:最初提交button是禁用的，在一个文件被选择后，提交按钮disabled属性将被删除，这样我就可以提交文件了。提交后，我清除了label，这使它看起来像我清除了文件input，但实际上不是。然后我将再次禁用提交按钮，以防止提交表单。

通过设置是否提交button disable，我停止多次提交文件，除非我选择另一个文件。

这其实很简单。

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

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

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

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

我改变了类型文本和返回类型文件使用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");
}

input.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");

试试这个简单的方法，它会奏效的

let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;

这将重置输入

在我的世界里，一个简单干净的解决方案是，将文件输入文件设置为清晰的FileList。

编辑:正如SteJ所说，这不是与Safari合作。

由于我们不能直接创建FileList - I用户DataTransfer作为“hack”;

@$input[0].files=new DataTransfer().files

或

file_input_node.files=new DataTransfer().files

1. 将值null或像这样的空字符串' '，以清除单个输入元素的值

2. 您可以使用HTML按钮使用<input type=”reset”>属性轻松重置所有表单值。

3. HTMLFormElement.reset()方法恢复表单元素的默认值。此方法的作用与单击表单控件相同。

清除整个输入字段，而不必手动删除整个东西，或者如果在输入字段中已经有一个用户不想要的预先建议的输入。可能有很多情况。

您可以将此作为一个实际示例来尝试

const fileInputElement = document.getElementById('file-input');
const formElement = document.getElementById('input-form');




// Method-1: Clear files
// fileInputElement.value = '';


// Method-2: Clear files
// fileInputElement.value = null;


// Method-3: Clear files - on event listener
fileInputElement.addEventListener('change', (event)=>{
// If the file did not meet certain condition
event.target.value = '';
});




// Method-4: Clear or reset whole form
formElement.addEventListener('submit', (event)=>{
// If ajax call is failed to make request
event.target.reset();
// or
// formElement.reset()
});

.form{
display: flex;
flex-direction: column;
width: 80%;
margin-left: 10%;
}


#file-input, .form-control{
margin-top: 1rem;
}


.form-control{
padding: 1em 0;
}


#file-input{
background: #ccccff;
}


#file-input::-webkit-file-upload-button {
background: #000033;
color: white;
padding: 1em;
}
.button-group{
display: flex;
justify-content: start;
}


.btn{
background: #004d4d;
color: white;
width: 4rem !important;
margin-right: 10px;
}

<form id='input-form' class='form' >
<input type='file' id='file-input' />
<input type='text' class='form-control'  id='text-input' placeholder='your name' />
<div class='button-group'>
<button type='reset' class='form-control btn' id='reset-form'>Reset</button>
<button type='submit' class='form-control btn' id='submit-form'>Submit</button>
</div>
</form>