jQuery图片上传前先在本地预览

来源：互联网发布：windows同步软件编辑：程序博客网时间：2024/05/20 18:48

js代码：

*名称:图片上传本地预览插件 v1.1*作者:周祥*时间:2013年11月26日*介绍:基于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,            _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 ($.browser.msie) {                    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()            }        })    }});

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>图片上传预览演示-柯乐义</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="16/uploadPreview.js" type="text/javascript"></script><script>$(function () {$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });});</script></head><body><div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2><a href="http://keleyi.com/a/bjac/4g8fo9yu.htm" target="_blank">原文</a><div><img id="ImgPr" width="120" height="120" /></div><input type="file" id="up" /></div></body></html>

0 0