前段時(shí)間遇到一個(gè)問題，前端想實(shí)現(xiàn)圖片上傳預(yù)覽（不經(jīng)過后端PHP或JAVA處理），用戶點(diǎn)擊file按鈕上傳文件，點(diǎn)擊確定馬上就能看到預(yù)覽的效果，但在實(shí)現(xiàn)的時(shí)候無論怎樣都取不到file上圖片的真實(shí)路徑，得到的反而是C:\fakepath\a.jpg，這個(gè)路徑是錯(cuò)誤的。百度之后得到說瀏覽器基于保護(hù)用戶的相關(guān)安全措施，隱藏了上傳的真實(shí)路徑，用fakepath代替，當(dāng)然，調(diào)整瀏覽器的相關(guān)安全設(shè)置可以解決這個(gè)問題。但我們不可能讓所有用戶都通過設(shè)置瀏覽器的安全設(shè)置來進(jìn)行圖片上傳，這種方法在網(wǎng)絡(luò)交互上顯然不現(xiàn)實(shí)。

/* *名稱:圖片上傳本地預(yù)覽插件 v1.1 *介紹:基于JQUERY擴(kuò)展,圖片上傳預(yù)覽插件 目前兼容瀏覽器(IE 谷歌 火狐) 不支持safari *插件網(wǎng)站:http://keleyi.com/keleyi/phtml/image/16.htm *參數(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 () { }});

實(shí)例：

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} //高版本Jquey使用 if ($.support.leadingWhitespace)if ($.browser.msie) { //低版本jquery中使用的方式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()}})} });

調(diào)用：

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

HTML結(jié)構(gòu)：

<div> <img id="ImgPr" width="120" height="120" /> </div> <input type="file" id="up" />

?本人發(fā)布的插件測(cè)試地址：http://www.jq22.com/webqd875

轉(zhuǎn)載于:https://www.cnblogs.com/tongkaiqiang/p/6780822.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的jQuery图片上传前先在本地预览（不经过后端处理）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。