如何清除文件输入

下面是我的 jquery 代码的一部分，它显示文件输入和一个“ Clear File”按钮。

var $imagefile = $('<input />').attr({
type: 'file',
name: 'imageFile',
class: 'imageFile'
});


$image.append($imagefile);


var $imageclear = $('<input />').attr({
type: 'button',
name: 'imageClear',
class: 'imageClear',
value: 'Clear File'
});


$image.append($imageclear);

现在我之所以有“ Clear File”按钮是因为如果你点击这个按钮，它就会清除文件输入中的任何内容。我如何编码它，以便它实际上清除文件输入时，我点击“清除文件”按钮？

320579 次浏览
小开
最佳答案

这应该会奏效:

$imageClear.on('click', function() {
$imageFile.val('');
});
小开

这也是我喜欢使用的方法，但是我相信您需要将 bool true 参数添加到 clone 方法中，以便任何事件与新对象保持连接，并且您需要清除内容。

    var input = $("#fileInput");


function clearInput() {
input = input.val('').clone(true);
};

Https://api.jquery.com/clone/

小开

这个可以

 $("#yourINPUTfile").val("");
小开

使用 jQuery 清除文件输入

$("#fileInputId").val(null);

用 JavaScript 清除文件输入

document.getElementById("fileInputId").value = null;
小开

我做过类似的事情，这对我很有用

$('#fileInput').val(null);
小开

如果您想确定这是跨浏览器能够实现的，另一种解决方案是删除()标记，然后追加()或 prepend () ，或者以其他方式重新添加具有相同属性的 input 标记的新实例。

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
<input type="file" name="fileinput" id="fileinput" />
</label>
</form>


$("#fileinput").remove();
$("<input>")
.attr({
type: 'file',
id: 'fileinput',
name: 'fileinput'
})
.appendTo($("label[for='fileinput']"));
小开

通过设置 $("ID").val(null)，为我工作

小开

在我的案例中，其他的解决方案都没有这样的效果:

$('.bootstrap-filestyle :input').val('');

但是，如果页面上有多个文件输入，它将重置所有文件上的文本。

小开

获取输入 id，然后将 val 设置为空，如下所示: 注意: 不要在 val 空双引号 val (“”)之间放置空格。

 $('#imageFileId').val("")
小开

此代码适用于所有浏览器和所有输入。

$('#your_target_input').attr('value', '');
小开

反应用户

e.target.value = ""

但是，如果文件输入元素是由另一个元素(带有 htmlFor属性)触发的，那就意味着您没有事件

所以你可以找个裁判:

在 func 的开头:

const inputRef = React.useRef();

输入元件

<input type="file" ref={inputRef} />

然后在一个 onClick 函数上(例如)你可以写

inputRef.current.value = ""
  • 在反应类-同样的想法，但构造函数的差异: this.inputRef = React.createRef()
小开

好了，已经通过了

$('.file-input-element').change();


$(document).on("change", 'input[type="file"][data-module-name="Test"]', function (e) {
e.preventDefault();
var controlName = $(this).attr('name');
var fileFormData = new FormData();
var files = e.target.files;
if (files.length > 0) {
var file = files[0];
var fileName = file.name;
var fileSize = file.size; //in bytes
var fileType = file.type; //like "image/png"
if (fileSize > App.maxAllowedSizeInBytes) {
e.target.value = '';
$(this).attr("value", '');
$(this).change();
toastr.error(langData.UIMaxFileSizeShouldBeFiveMb);
return;
} else {
App.test.validation.ValidateFile(file);
fileFormData.append("file", file, fileName);
App.test.uploadFile(fileFormData, controlName, $(this));
}
}
});
小开 
$('#myImage').filestyle('clear');

我在吸毒

  • Jquery 2.2.1 &
  • Jqueyr UI 1.11.4
小开

这可以解决你的问题，我有问题时，我传递的存档与重音到名称，我解决了验证存档的大小和明确的输入，如果有一些不同于正常。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="file" placeholder="hello world" id="input_file" />


<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"
></script>
<script>
$("input:file").change(function () {
var fileInput = $(this); // => Gets the file data
var fileSize = fileInput.get(0).files[0].size; // => Value in bytes
if (fileSize == 0) {
$("#input_file").val("");
console.log('Something wrong :/');
} else {
console.log('good thats working :D');
}
});
</script>
</body>
</html>


提交答案