当我在输入文件中插入文件时，会显示预览，但是如何删除选定的文件？ [英] When I insert a file in an input file it shows preview, but how to delete a selected file?

问题描述

当用户选择文件时，我得到了这个javascript显示图像预览，它正在工作。

案例：

- 如果用户选择错误的图像并删除它，则预览不会刷新到'空'。

我不知道我该如何做到这一点，已经看过谷歌和stackoverflow什么也没有。有人可以给我点光吗？

 < img id =image1width =300pxheight =300px/> 
< img id =image2width =300pxheight =300px/> 
< img id =image3width =300pxheight =300px/> 
< img id =image4width =300pxheight =300px/> 
 
< script> 
 document.getElementById（productimage1）。onchange = function（）{
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 document.getElementById（image1）。src = e.target.result; 
}; 
 reader.readAsDataURL（this.files [0]）; 
}; 
 document.getElementById（productimage2）。onchange = function（）{
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 document.getElementById（image2）。src = e.target.result; 
}; 
 reader.readAsDataURL（this.files [0]）; 
}; 
 document.getElementById（productimage3）。onchange = function（）{
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 document.getElementById（image3）。src = e.target.result; 
}; 
 reader.readAsDataURL（this.files [0]）; 
}; 
 document.getElementById（productimage4）。onchange = function（）{
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 document.getElementById（image4）。src = e.target.result; 
}; 
 reader.readAsDataURL（this.files [0]）; 
}; 
< / script> 
  

解决方案

/ p>

您希望在用户尝试使用打开文件窗口选择新图像时清除图像预览。没有删除按钮。

以下是您应该做的事情：

  //删除函数
 $（[id ^ ='product']）。on（click，function（）{
 
 //清除输入值。 
 $（this）.val（）; 
 
 //这将重新设置预览。
 var imageID = $（this）.attr（id）。substr （7）; 
 $（＃+ imageID）.attr（src，https://placehold.it/300x300）; 
}）; 
  

请参阅 CodePen

---

---编辑

以下是完整的代码 optimized 。

  //删除函数
 $（[id ^ ='product']） .on（click，function（）{
 
 //清除输入值。
 $（this）.val（）; 
 
 （）;}这将重置预览。
 var imageID = $（this）.attr（id）。substr（7）; 
 $（＃+ imageID）.attr（src， https://placehold.it/300x300）; 
}）; 
 
 
 //预览函数
 $（[id ^ ='product']）。on（change，function（）{
 var imageID = $（this）.attr（id）。substr（7）; 
 
 //显示预览im右边的div 
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 $（＃+ imageID）.attr（src，e.target.result）; 
}; 
 reader.readAsDataURL （this.files [0]）; 
}）; 
  

请参阅 CodePen - version＃2

I got this javascript to show image preview when user select the file, it is working.
Case:
- If user select wrong image and delete it then preview do not refresh to 'empty'.
I have no idea how can I do this, already lookd around google and stackoverflow and nothing. Can someone give me a light please?

<img id="image1" width="300px" height="300px"/>
<img id="image2" width="300px" height="300px"/>
<img id="image3" width="300px" height="300px"/>
<img id="image4" width="300px" height="300px"/>

<script>
    document.getElementById("productimage1").onchange = function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("image1").src = e.target.result;
            };
            reader.readAsDataURL(this.files[0]);
        };
    document.getElementById("productimage2").onchange = function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("image2").src = e.target.result;
            };
            reader.readAsDataURL(this.files[0]);
        };
    document.getElementById("productimage3").onchange = function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("image3").src = e.target.result;
            };
            reader.readAsDataURL(this.files[0]);
        };
    document.getElementById("productimage4").onchange = function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("image4").src = e.target.result;
            };
            reader.readAsDataURL(this.files[0]);
        };
</script>

解决方案

If I get what you want correctly...

You want the image preview to be cleared when user tries to select a new image using the "open file" window. No delete button.

Here is what you should do then:

// A delete function
$("[id^='product']").on("click",function(){

  // This clears the input value.
  $(this).val("");

  // This resets the preview.
  var imageID = $(this).attr("id").substr(7);
  $("#"+imageID).attr("src","https://placehold.it/300x300");
});

See in CodePen

---

---EDIT

Here is the full code optimized.

// A delete function
$("[id^='product']").on("click",function(){

  // This clears the input value.
  $(this).val("");

  // This resets the preview.
  var imageID = $(this).attr("id").substr(7);
  $("#"+imageID).attr("src","https://placehold.it/300x300");
});


// The preview function
$("[id^='product']").on("change",function(){
  var imageID = $(this).attr("id").substr(7);

  // Displays a preview im the right div
  var reader = new FileReader();
  reader.onload = function (e) {
    $("#"+imageID).attr("src",e.target.result);
  };
  reader.readAsDataURL(this.files[0]);
});

See in CodePen - version #2

这篇关于当我在输入文件中插入文件时，会显示预览，但是如何删除选定的文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！