- <!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 src1="jquery-1.8.1.min.js" type="text/javascript"></script>
- <script>
- /*
- *参数说明: 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 src1= "";
- var obj = $("#" + opts.Img);
- var div = obj.parent("div")[0];
- _self.select();
- if (top != self) {
- window.parent.document.body.focus()
- } else {
- _self.blur()
- } src1= 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()
- }
- })
- }
- });
- $(function () {
- $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
- });
- </script>
- </head>
- <body>
- <div style="width: 500px; margin: 0px auto;">
- <h2>图片上传预览演示</h2>
- <div>
- <img id="ImgPr" width="120" height="120" /></div>
- <input type="file" id="up" />
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0705201512514.html
来源: http://www.codesnippet.cn/detail/0705201512514.html