Question

我创建了一个插件，在上传图片之前显示图片缩略图和信息，但因为它使用的是html5功能，所以它不适用于旧的IE版本。我只是尝试更新此插件，告诉用户如果不支持这些功能，请更新浏览器或使用其他浏览器。这是读取图像的代码的一部分（在文件输入的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

关于元素的更改事件，您可以通过检查size变量的返回值来查看是否支持file，如果它是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);
                }

检查input type =“file”中加载的文件的文件信息的可用性

1 个答案: