检查输入类型="file"中加载的文件的文件信息是否可用

checking the availability of file information of the file loaded in input type="file"

本文关键字：quot 文件信息是否 file 类型输入检查加载更新时间：2023-09-26

我已经创建了一个插件，在上传图像之前显示图像缩略图和信息，但由于它使用html5功能，它不适用于旧的IE版本。我只是想做更新这个插件，告诉用户你更新他的浏览器或使用另一个浏览器，如果功能不支持。下面是读取image的代码部分(在文件输入的onchange事件触发):

function readImg() {
                $('#preview').html('<br /><span>Preview</span><br />');
                var file = document.getElementById('addfile').files[0];
                if (file.size > 1048576) {
                    parent.$('<div></div>').html('Photo file must be at most 1MB!').alertBox({ title:  'Upload Photo' });
                    document.getElementById('addfile').value = '';
                    return;
                }
                ldimgext = desiredExt(file.name);
                if (!ldimgext) {
                    parent.$('<div></div>').html('Only gif,jpg and png files are accepted!').alertBox({ title: 'Upload Photo' });
                    document.getElementById('addfile').value = '';
                    return;
                }
                var reader = new FileReader();
                reader.onload = imgLoaded;
                reader.readAsDataURL(file);
            }
function imgLoaded(e) {
                tsimg = e.target.result.replace(/^data:image'/(png|jpeg|gif);base64,/, "");
                var img = $('<img src="'+ e.target.result + '"/>');
                var tmp = new Image();
                tmp.src = e.target.result;
                tmp.onload = function () {
                    if (tmp.width > tmp.height) img.attr('width', '80'); else img.attr('height', '80');
                    $('#preview').html('').append(img);
                }

如何查看FileReader和filesize，…我在这里使用的所有选项在浏览器中是否支持?

在元素的更改事件上，您可以通过检查file变量的返回值来检查是否支持size，如果是null则不支持。所以你的代码最终会变成:

function readImg() {
                $('#preview').html('<br /><span>Preview</span><br />');
                var file = document.getElementById('addfile').files[0];
                //the added part
                if(file==null){
                    alert('your browser does not support this feature');
                    return false;
                }
                if (file.size > 1048576) {
                    parent.$('<div></div>').html('Photo file must be at most 1MB!').alertBox({ title:  'Upload Photo' });
                    document.getElementById('addfile').value = '';
                    return;
                }
                ldimgext = desiredExt(file.name);
                if (!ldimgext) {
                    parent.$('<div></div>').html('Only gif,jpg and png files are accepted!').alertBox({ title: 'Upload Photo' });
                    document.getElementById('addfile').value = '';
                    return;
                }
                var reader = new FileReader();
                reader.onload = imgLoaded;
                reader.readAsDataURL(file);
            }
function imgLoaded(e) {
                tsimg = e.target.result.replace(/^data:image'/(png|jpeg|gif);base64,/, "");
                var img = $('<img src="'+ e.target.result + '"/>');
                var tmp = new Image();
                tmp.src = e.target.result;
                tmp.onload = function () {
                    if (tmp.width > tmp.height) img.attr('width', '80'); else img.attr('height', '80');
                    $('#preview').html('').append(img);
                }