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

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" οnchange="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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值