使用jQuery删除输入选择图像预览

Question

我在上传前使用jquery添加图像预览/删除：

HTML就在这里：

<input type='file' id='input1'>
<img id='imagepreview1' src="http://placehold.it/100x100" />

JS就在这里：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imagepreview1').prop('src', e.target.result).show().addClass('selected');
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#input1").change(function () {
    readURL(this);
    $('#imagepreview1').show();
});

var orig_src = $('#imagepreview1').prop('src');

$('#imagepreview1').click(function () {
    $('#input1').replaceWith($('#input1').clone(true));
    $('#imagepreview1').not('.selected').hide();
    $('#imagepreview1.selected').prop('src', orig_src).removeClass('selected');
});

现在，当我通过点击删除图像时，选择的图像输入不会从我的表单中删除和发布数据。我可以在删除图像时删除输入选择吗？

问题PIC（当我删除图像并显示预览时）：

注意：（我检查FF不起作用）

DEMO HERE：http://jsfiddle.net/mkGSY/

Answer 1

只需从input字段中移除值。

$('#input1').val('');

此处更新了DEMO。

Answer 2

使用原生javascript

如果每个人都只使用jQuery来执行这些简单的任务，那么没有人会了解ECMAScript的浏览器实现是如何工作的。

您可以轻松使用以下内容：

document.getElementById('input1').reset(); // My favourite

或者如果您更喜欢重置input-element的值：

document.getElementById('input1').value = ""; // Will work just in major browsers
document.getElementById('input1').value = null; // Much more cross-browser compatible

如果你想坚持使用jQuery

...帮自己一个忙，并使用极端防弹的方法（而不是使用.val('')：

var input = $("#input1");

function clearFileUpload() {
  input.replaceWith(input.val('').clone(true));
};