jquery實(shí)現(xiàn)圖片上傳之前預(yù)覽的方法

2024-05-06 16:23:03

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了jquery實(shí)現(xiàn)圖片上傳之前預(yù)覽的方法,涉及jquery針對(duì)圖片及頁面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)圖片上傳之前預(yù)覽的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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="jquery-1.8.1.min.js" type="text/javascript"></script>

<script>

/*

*參數(shù)說明: Img:圖片ID;Width:預(yù)覽寬度;Height:預(yù)覽高度;ImgType:支持文件類型;Callback:選擇文件顯示圖片后回調(diào)方法;

*使用方法:

<div>

<img id="ImgPr" width="120" height="120" /></div>

<input type="file" id="up" />

把需要進(jìn)行預(yù)覽的IMG標(biāo)簽外套一個(gè)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("選擇文件錯(cuò)誤,圖片類型必須是" + 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()

}

})

}

});

$(function () {

$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });

});

</script>

</head>

<body>

<div style="width:500px;margin:0px auto;"><h2>圖片上傳預(yù)覽演示</h2>

<div><img id="ImgPr" width="120" height="120" /></div>

<input type="file" id="up" />

</div>

</body>

</html>