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

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

中途取消了拍照，预览区就会显示找不到图片

代码如下：

//js代码
$("#file").change(function(){
    $("#img").attr("src",URL.createObjectURL($(this)[0].files[0]));
});
//html代码
...

...

做一个小小修改就行，在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]，在电脑浏览器和小米手机浏览器都不会出现异常，但是就在打包后安装到华为平板才出现这个异常，用判断文件大小的方法解决了这个问题。

原创，转载请注明出处！

微信公众号同步更新