检查输入类型=“文件”中加载的文件的文件信息的可用性

Question

我创建了一个插件，该插件在上传图像之前会显示图像缩略图和信息，但是由于它很好地使用了html5功能，因此不适用于旧版IE。 我只是尝试更新此插件，以告诉用户您更新了他的浏览器，或者如果不支持该功能，则使用其他浏览器。 这是正在读取图像的代码部分（在文件input的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，...在此使用的所有选项？

Answer 1

在元素的change事件上，您可以通过检查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);
                }