记录——全浏览器兼容的图片上传插件

来源：互联网发布：ubuntu怎么安装eclipse 编辑：程序博客网时间：2024/05/30 23:04

这几天写的一个支持全浏览器的图片上传插件

// 预览图片(function($) {      jQuery.fn.extend({          uploadPreview: function(opts) {              opts = jQuery.extend({                  width: 0,                  height: 0,                  imgDiv: "#imgDiv",                  maxSize:2024,                  imgType: ["gif", "jpeg", "jpg", "bmp", "png"],  zoomIn:function(){},zoomOut:function(){$(this).width(opts.width);$(this).height(opts.height);if(opts.marginLeft)$(this).css("margin-left",opts.marginLeft);else $(this).css("margin-left","");$(this).css("margin-top","");},                callback: function() { return false; }            }, opts || {});              var _this = $(this);              var imgDiv = $(opts.imgDiv);             imgDiv.width(opts.width);              imgDiv.height(opts.height);                             var version = parseInt($.browser.version,10);               _this.change(function() {                                    if (this.value) {                      if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {                          alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");                          this.value = "";                          return false;                      }                                          if ($.browser.msie && version < 10) {                          // chrome                        if (version == 6) {                              opts.version = "chrome";                            var image = new Image();  image.id="imgPreviewEl";                            image.onload = function(){                                  if( (image.fileSize/1024) > opts.maxSize) {                                      alert('图片大小不能超过'+opts.maxSize+'K');                                      return false;                                  }                              }                              image.src = 'file:///' + this.value;  var img = $("<img />");  opts.el = img;                            img.attr('src', image.src);img.width(opts.width);  img.height(opts.height);  img.mouseover(bind(opts.zoomIn,opts));img.mouseleave(opts.zoomOut);imgDiv.html(img);opts.callback();                        }  // ie浏览器else {                                opts.version = "ie";                                this.select();                              var img = document.selection.createRange().text;                              var image = new Image();                              image.onload = function(){                                  if( (image.fileSize/1024) > opts.maxSize) {                                      alert('图片大小不能超过'+opts.maxSize+'K');                                      return false;                                  }                              }  opts.marginLeft = imgDiv.css("margin-left");opts.el = imgDiv;imgDiv.mouseover(bind(opts.zoomIn,opts));imgDiv.mouseleave(opts.zoomOut);                            imgDiv.html('');                                                          imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" });                                                       try {                                  imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;  opts.callback();                            } catch (e) {                                  alert("无效的图片文件！");                                  return;                              }                                                                              }                      }  // 火狐浏览器                    else {                          try{     opts.version = "firefox";                            var file = null;                              var size = 0;                              if(this.files && this.files[0] ){                                  file = this.files[0];                                   size = file.size;                              }else if(this.files && this.files.item(0)) {                                                                  file = this.files.item(0);                                     size = file.fileSize;                              }                                  if((size/1024) > opts.maxSize){                                  alert('图片大小不能超过'+opts.maxSize+'K');                                  return false;                              }                                var img = $("<img />");  opts.el = img;img.width(opts.width);  img.height(opts.height);  imgDiv.mouseover(bind(opts.zoomIn,opts));img.mouseleave(opts.zoomOut);imgDiv.html(img);                            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径                              try{                                  //Firefox7.0 以下                                                               img.attr('src', file.getAsDataURL());                              }catch(e){                                  //Firefox8.0以上                                                                img.attr('src', window.URL.createObjectURL(file));                              }                                                            img.css({ "vertical-align": "middle" });  opts.callback();                        }catch(e){                                                        //支持html5的浏览器,比如高版本的firefox、chrome、ie10                              if (this.files && this.files[0]) {                                                            if((this.files[0].size/1024) > opts.maxSize){                                      alert('图片大小不能超过'+opts.maxSize+'K');                                      return false;                                  }                                                                    var reader = new FileReader();                                   reader.onload = function (e) {                                                                            imgDiv.attr('src', e.target.result);                                    };                                  reader.readAsDataURL(this.files[0]);   opts.callback();                            }                            };                      }                  }              });          }      });  })(jQuery);

用法举例：

<label>营业执照</label><input id="businessLicenseImg" type="file" name="businessLicenseImg" /> <div id="imgPreview" style="width:70px; height:100px;margin-left:100px"></div>

$("#businessLicenseImg").uploadPreview({ width: 70, height: 100, imgDiv: "#imgPreview" , zoomIn:function(){$(this.el).width(350);$(this.el).height(500);if(this.version=="ie"){$(this.el).css("margin-left","50px");$(this.el).css("margin-top","-180px");}else{$(this.el).css("margin-left","-70px");$(this.el).css("margin-top","-180px");}},callback:function(){$('#isDel').val("0");$('#imgDel').show();}});

阅读全文

0 0