Question

我有一个html文件输入字段，我有一些jQuery代码可以检测用户选择的图像的高度和宽度。

我遵循我在此处找到的格式：http://jsbin.com/oTAtIpA/3/edit?html,css,js,output

我遇到的问题是，如果清除浏览字段，我还希望清除上传预览。

具体来说，我在Chrome上测试了这个，我发现如果我浏览该字段的图像，它会正确填充图像信息。但是，如果我再次点击该按钮浏览其他文件，然后点击取消而不是选择文件，Chrome将不显示所选文件，但上传预览仍然存在。

有没有办法检测文件输入何时被清除，所以我也可以清除上传预览？

Answer 1

你可以这样做：

$("#file").on("change", function() {
  if ($(this).val()) { return; }
  alert("Input is empty.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file" type="file">

Answer 2

当文件输入更改为空时，您需要清除预览区域：

$("#choose").change(function (e) {
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) {
        for(var i=0; i<F.length; i++) readImage( F[i] );
    } else {
        $('#uploadPreview').empty();
    }
});

Answer 3

如果单击文件上传对话框中的取消按钮，则文件长度 0 。

var file=document.getElementById("choose");

file.onchange=function(){
   if(file.value.length==0){
       $("#uploadPreview img").attr("src","");
   }
   else{
      //do your other stuff
   }
 }

检测用jQuery清除的文件输入

3 个答案: