javascript - 如何在使用 JavaScript 保存图像的同时清除图像？

Question

我有代码来浏览图像并显示它，但我需要另一个代码来清除该图像。

以下是我的代码

<p><input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="200" /></p>
<p><input type="button" class="button default" name="send" id="upload" value="Save"></p>


<script>
var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};
</script>

实际上，我使用 ajax 保存图像，单击保存按钮时不会加载表单。

我使用下面的 js 清除了文件的路径，但它没有清除图像

<script>
$(document).ready(function(){
    $("#upload").click(function(){
        var fd = new FormData();
        var files = $('#file')[0].files;
           fd.append('file',files[0]);

        if ($('#file').val()) {
            $('#file').val('');
        }

    });
});
</script>

如何在使用 JavaScript 保存图像的同时清除图像？

标签： javascripthtml

Answer 1

像这样使用

$("#file").replaceWith($("#file").val('').clone(true));