上传文件前先预览图片的实现方法

来源：互联网发布：mac os x与windows 编辑：程序博客网时间：2024/05/24 04:26

1. js版本

 <script type="text/javascript">              function setImagePreview(docObj,localImag,imgObjPreviewId){              var localImagDiv  = document.getElementById(localImag);            var imgObjPreview = document.getElementById(imgObjPreviewId);                if(docObj.files && docObj.files[0]){                      //火狐下，直接设img属性                      imgObjPreview.style.display = 'block';                      imgObjPreview.style.width = '300px';                      imgObjPreview.style.height = '200px';                                                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式                        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);                  }else{                      //IE下，使用滤镜                      docObj.select();                      var imgSrc = document.selection.createRange().text;                                            //必须设置初始大小                      localImagDiv.style.width = "300px";                      localImagDiv.style.height = "200px";                                            //图片异常的捕捉，防止用户修改后缀来伪造图片                      try{                          localImagDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                          localImagDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;                      }catch(e){                          alert("您上传的图片格式不正确，请重新选择!");                          return false;                      }                                                imgObjPreview.style.display = 'none';                      document.selection.empty();                  }                  return true;              }      </script>

<input class="file" name="uploadFile" id="uploadimgs" onchange="javascript:setImagePreview(this,'localImag','img1');" type="file"/><div id="localImag">     <img id="img1" src="" alt="" width="100px" border="1"/></div>

2. jQuery版本

/**名称:图片上传本地预览插件 v1.1*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;*使用方法: <div><img id="ImgPr" width="120" height="120" /></div><input type="file" id="up" />把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});*/jQuery.fn.extend({    uploadPreview: function (opts) {        var _self = this;        var _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;                }                if (!$.support.leadingWhitespace) {//IE不支持leadingWhitespace                    try {                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));                    } catch (e) {                        //IE使用滤镜                        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();            }        })    }});

<input class="file" name="uploadFile" id="uploadimgs" type="file"/><div id="localImag">    <img id="img1" src="" alt="" width="100px" border="1"/></div>$(function(){         $("#uploadimgs").uploadPreview({ Img: "img1", Width: 120, Height: 120 });});

0 0