標籤：多圖上傳 圖片上傳本地預覽 uploadpreview.js 圖片上傳表單控制項美化
近期在項目中遇到一個問題，需要在上傳圖片時可以在本地預覽，但是傳統的‘<input type="file">‘並不支援。這裡可以借用uploadPreview.js 實現
/*這部分內容非本人原創，完全來自網路，感謝原創作者的分享*/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() } }) }});
可以把這部分js檔案copy到自己的檔案夾目錄裡面，在jQuery檔案之後引用。先來看一小段html代碼
<!--圖片預覽視窗--><div> <img id="ImgPr" width="120" height="120"/></div><!--圖片上傳--><input type="file" id="up" />
然後，只需要在自己的js檔案中給對應的檔案上傳表單綁定uoload事件就可以
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
看看初步的頁面效果：
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/88/2F/wKioL1free6BdvYYAACza3B9ySM893.png" title="QQ20160928160459.png" alt="wKioL1free6BdvYYAACza3B9ySM893.png" />
在我的項目中，想要實現的效果是，點擊一個預設的圖片就可以直接用新的圖片替換原來的圖片，所以需要把預覽圖片的src賦給原來的圖片，同時，我還想去掉“選擇檔案”和後面的檔案路徑，這些東西不太美觀，所以我採取了一下的方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #up{opacity: 0; position:absolute; top:40%; left:1%;}/*把這個檔案上傳表單設定全透明，藏在圖片下面，不顯示給使用者*/ </style> </head> <body> <!--圖片預覽視窗--> <div> <img id="ImgPr" width="120" height="120"/> </div> <!--圖片上傳--> <input type="file" id="up" /> <a id="ImgChange" href="#"> <!--用這個a標籤來替代圖片上傳表單--> <img src="resources/images/3.jpg" > </a> <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/uploadPreview.js"></script> <script> $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 }); $(‘#ImgChange‘).click(function(e){ e.preventDefault();//阻止a連結預設跳轉 if($(‘#up‘)){ //把圖片的點擊事件加到<input type="file">上 $(‘#up‘).click(); setInterval(function(){ //點擊以後載入新的檔案路徑需要一段時間，所以設定1秒鐘的延時，否則擷取src屬性時就是undefined $(‘#ImgChange img‘).attr(‘src‘,$(‘#ImgPr‘).attr(‘src‘)); },1000); //有效避免出現 fakepath這種情況 }; } ); </script> </body></html>
初步效果：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/88/30/wKioL1frfyfgRpyFAAVHQxBwd4o130.png" title="QQ20160928162245.png" alt="wKioL1frfyfgRpyFAAVHQxBwd4o130.png" />、
那如果是想要一次上傳多張並且支援圖片預覽的話，推薦使用Web Uploader http://fex.baidu.com/webuploader/
650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/88/30/wKioL1frfzyg1Ou6AAHHYxeDoS0317.png" title="QQ20160928162508.png" alt="wKioL1frfzyg1Ou6AAHHYxeDoS0317.png" />
那如果是圖片，並且支援本地預UploaderbUploader
本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1857419
HTML頁面上傳圖片預覽功能，一次上傳多張圖片
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
