WebView打包html5的input拍照取消时防止获取空文件的js处理

Posted 2021-04-04 WHJ00IT技术

使用html5的input标签实现拍照上传时，需要js监听input状态，将拍到的图片显示到页面预览区（一个div中），正常拍照显示没问题，但是如果中途取消了拍照，预览区就会显示找不到图片。

不显示图片..180608102743.png

代码如下：

//js代码
$("#file").change(function(){
    $("#img").attr("src",URL.createObjectURL($(this)[0].files[0]));
});
//html代码
...
<img id="img" src="images/abc.png">
...
<input  type="file" name="file" id="file" accept="image/*" capture="camera">

做一个小小修改就行，在js代码中，给预览区赋值前判断一下获取的文件大小就可以了，如下

$("#file").change(function(){
      if($(this)[0].files[0].size>0){//判断获取的文件大小是不是大于0
            $("#img").attr("src",URL.createObjectURL($(this)[0].files[0]));
        }
});

曾经试图判断文件是不是null和空值都失败了，因为$(this)[0].files[0]得到是是一个对象，打印的返回值是[Object object]，在电脑浏览器和小米手机浏览器都不会出现异常，但是就在打包后安装到华为平板才出现这个异常，用判断文件大小的方法解决了这个问题。

原创，转载请注明出处！