jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

我用到的原材料地址：http://www.cnblogs.com/leejersey/p/3660202.html

修改后：

/// <reference path="../../Js/jquery-1.7.2.min.js" />/**使用方法: !!!!!!!!请把input放在图片上方<div><input type="file" id="up" /><img id="ImgPr" width="120" height="120" /></div>把需要进行预览的IMG标签外 套一个div 然后给上传控件id给予uploadPreview 然后调用CheckInito 然后点击图片就行了$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}).CheckInito();var p=$("fff").uploadPreview({});p.checkFile() //立即弹出file选择文件对话框 ie不适合*/$.fn.extend({  uploadPreview: function (opts) {    var _self = this,      _this = $(this);    opts = jQuery.extend({      Img: "ImgPr",      Width: 100,      Height: 100,      ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],      Callback: function () { }    }, opts || {});    _self.getObjectURL = function (file) {      var url = null;      if (window.createObjectURL != undefined) {        url = window.createObjectURL(file)      } else if (window.URL != undefined) {        url = window.URL.createObjectURL(file)      } else if (window.webkitURL != undefined) {        url = window.webkitURL.createObjectURL(file)      }      return url    };    _this.change(function () {      if (this.value) {        if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {          alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");          this.value = "";          return false        }        var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;        if (ie) {          try {            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))          } catch (e) {            var src = "";            var obj = $("#" + opts.Img);            var div = obj.parent("div")[0];            _self.select();            if (top != self) {              window.parent.document.body.focus()            } else {              _self.blur()            }            src = document.selection.createRange().text;            document.selection.empty();            obj.hide();            obj.parent("div").css({              'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',              'width': opts.Width + 'px',              'height': opts.Height + 'px'            });            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src          }        } else {          $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))        }        opts.Callback()      }    })    return {      /*ie不适用！*/      checkFile: function CheckFile() {        var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;        if (ie) {          _this[0].click();        } else {          var mouseobj = document.createEvent("MouseEvents");          mouseobj.initEvent("click", true, true);          _this[0].dispatchEvent(mouseobj);        }        return _self;      },      //兼容ie8的      CheckInito: function () {        var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;        _this.css("position", "absolute");        _this.parent().css("width", opts.Width + "px");        _this.parent().css("height", opts.Height + "px");        if (ie) {          //width: 67.5px; height: 37.4px; padding-right: 5px; position: absolute; opacity: 1;          _this.css("width", opts.Width + "px");          _this.css("height", opts.Height + "px");          _this.css("font-size", "200px");          _this.css("overflow", "hidden");        } else {          _this.css("left", "0px");          _this.css("top", "0px");          _this.css("width", opts.Width + "px");          _this.css("height", opts.Height + "px");        }        _this.css("opacity", "0");        return _self;      }    };  }});

调用实例：

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <script src='/images/loading.gif' data-original="Js/jquery-1.7.2.min.js"></script>  <script src='/images/loading.gif' data-original="Admin/js/uploadPreview.js"></script>  <script>    function loadOver() {      $("#myselfpicFile").uploadPreview({ Img: "myselfpic", Width: 150, Height: 180 }).CheckInito();    }  </script></head><body onload="loadOver();">  <div class="photo">    <input id="myselfpicFile" type="file" name="myselfpic" />    <img width="150" height="180" id="myselfpic" class="" src='/images/loading.gif' data-original="../$obj.myselfpic" />  </div></body></html>

最终效果图

ie: