上传图片预加载图片插件
如果我们在选择好上传的图片,我们就能够判断图片的size、宽度、高度以及上传图片的类型,这样我们就可以在前端做了判断,而不需要上传到后台页面才做出这些判断。这样可以提高用户的体验以及减少不必要的流量,于是上完查找资料,写出了如下jquery插件。
(function($){ var defaults = { show:null, size:1000, extension:[] }, browser = window.navigator.userAgent.toUpperCase(); function checkExtension(file){ var extensions = defaults.extension, len = extensions.length, name = file.name; if(len > 0){ extension = name.substr(name.lastIndexOf(name)+1).toLowerCase(); var i = 0; for(i;i < len;i++){ if (defaults.extension[i] === extension) break; } if (i == len) return false; } return true; } function checkSize(file){ if(defaults.size) { var size = file.size; if(size > defaults.size) return false; } return true; } function show(src){ if(defaults.show){ if(!checkExtension(src)) throw new Error("上传文件不符合指定格式要求"); var show = $(defaults.show); show.empty(); show.append($('<img src="'+src+'">')); } } function preview(elem){ if(elem.files){ var file = elem.files[0]; if(!checkSize(file.size)) throw new Error("文件超出了指定大小"); if(window.FileReader){ var reader = new FileReader(); reader.onload = function(e){ show(e.target.result); }; reader.readAsDataURL(file); } }else if (browser.indexOf("MSIE")>-1) { //ie、360低版本预览 if(browser.indexOf("MSIE 6")>-1){ //ie 6 show(elem.value); }else{ elem.select(); if(browser.indexOf("MSIE 9") > -1){ //ie 9 elem.blur(); } var container = $(defaults.show)[0], src = document.selection.createRange().text; container.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; } }else if(browser.indexOf("FIREFOX") > -1){ //firefox var version = parseFloat(browser.toLowerCase().match(/firefox\/([\d.]+)/)[1]); version < 7 ? show(file.getAsDataURL) : show(window.URL.createObjectURL(file)); }else show(elem.value); } $.fn.preview = function(options){ var me = this; $.extend(defaults,options); $(me).on('change',function(e){ preview(this); }); }; })(jQuery); $(function(){ $('#fileUpload input[type=file]').preview({ show:$('#preview') }); });
美中不足的地方是,在ie中使用滤镜显示图片,出现异常。大家如果解决了或有什么好的建议,可以请贴上,大家一起探讨分享。
浙公网安备 33010602011771号