本地预览图片html和js例子
生活随笔
收集整理的這篇文章主要介紹了
本地预览图片html和js例子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本地預覽圖片html和js例子，直接上代碼吧。
<!DOCTYPE?html> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/> ????<title>測試本地圖片預覽</title> </head> <body> ????<div> ????????<div?id="preview_div"?style="width:?200px;?height:?200px;?border:?1px?solid?#b6ff00;?cursor:?pointer;"?onclick="previewFunc();"> ????????????<img?id="preview_img"?style="width:100%;height:200px;"/> ????????????<input?id="upload_img"?type="file"?style="width:0px;height:0px;"?/> ????????</div> ????</div> </body> </html> <script?type="text/javascript"> ????function?previewFunc() ????{ ????????document.getElementById("upload_img").click(); ????} ????//值改變的話 ????document.getElementById("upload_img").onchange?=?function?()?{ ????????var?sender?=?this; ????????if?(!sender.value.match(/.jpg|.gif|.png|.bmp/i))?{ ????????????alert('圖片格式無效！'); ????????????return?false; ????????} ????????var?objPreviewImg?=?document.getElementById('preview_img'); ????????var?objPreviewDiv?=?document.getElementById('preview_div'); ????????if?(navigator.userAgent.indexOf("MSIE")?>?-1)?{ ????????????//IE瀏覽器的話 ????????????try?{ ????????????????objPreviewImg.src?=?createFileObj(this.files[0]); ????????????} ????????????catch?(e)?{ ? ? ? ? ? ? ? ? ? ? ?//ie7中不兼容出錯跳到這里 ????????????????this.select(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//選擇的時候 ????????????????top.parent.document.body.focus();????????????????//如果要嵌套到iframe中進行顯示的話，需要加這個將焦點聚到iframe里面 ????????????????this.blur(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//必須要加這個 ????????????????var?src?=?document.selection.createRange().text; ? ? ? ? ?//IE?11中改為如下:document.selection?---》??window.getSelection?? ????????????????document.selection.empty(); ????????????????objPreviewImg.style.display?=?"none"; ? ? ? ? ? ? ? ??//隱藏img控件 ????????????????objPreviewDiv.style.filter?=?"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; ????????????????objPreviewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src?=?src; ????????????} ????????}?else?{ ????????????//chrome?firfox都可以 ????????????objPreviewImg.src?=?createFileObj(this.files[0]); ????????} ????} ????function?createFileObj(filePath) ????{ ????????var?url?=?null; ????????if?(window.createObjectURL?!=?undefined)?{ ????????????url?=?window.createObjectURL(filePath); ????????}?else?if?(window.URL?!=?undefined)?{ ????????????url?=?window.URL.createObjectURL(filePath); ????????}?else?if?(window.webkitURL?!=?undefined)?{ ????????????url?=?window.webkitURL.createObjectURL(filePath); ????????} ????????else?{ ????????} ????????return?url; ????} </script> ? //---------------------------------------------------------------------- 以上需要注意的地方是 ?<input?id="upload_img"?type="file"?style="width:0px;height:0px;"?/>?
注意不能用display:none的樣式進行隱藏，否則ie7中無論如何都不能獲取到對應value值。 以上代碼嵌套到iframe中也是可以進行預覽的，如果自己想封裝組件的朋友可以自己再封裝一下，或者用jQuery重寫一下就OK了。 ?
<!DOCTYPE?html> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/> ????<title>測試本地圖片預覽</title> </head> <body> ????<div> ????????<div?id="preview_div"?style="width:?200px;?height:?200px;?border:?1px?solid?#b6ff00;?cursor:?pointer;"?onclick="previewFunc();"> ????????????<img?id="preview_img"?style="width:100%;height:200px;"/> ????????????<input?id="upload_img"?type="file"?style="width:0px;height:0px;"?/> ????????</div> ????</div> </body> </html> <script?type="text/javascript"> ????function?previewFunc() ????{ ????????document.getElementById("upload_img").click(); ????} ????//值改變的話 ????document.getElementById("upload_img").onchange?=?function?()?{ ????????var?sender?=?this; ????????if?(!sender.value.match(/.jpg|.gif|.png|.bmp/i))?{ ????????????alert('圖片格式無效！'); ????????????return?false; ????????} ????????var?objPreviewImg?=?document.getElementById('preview_img'); ????????var?objPreviewDiv?=?document.getElementById('preview_div'); ????????if?(navigator.userAgent.indexOf("MSIE")?>?-1)?{ ????????????//IE瀏覽器的話 ????????????try?{ ????????????????objPreviewImg.src?=?createFileObj(this.files[0]); ????????????} ????????????catch?(e)?{ ? ? ? ? ? ? ? ? ? ? ?//ie7中不兼容出錯跳到這里 ????????????????this.select(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//選擇的時候 ????????????????top.parent.document.body.focus();????????????????//如果要嵌套到iframe中進行顯示的話，需要加這個將焦點聚到iframe里面 ????????????????this.blur(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??//必須要加這個 ????????????????var?src?=?document.selection.createRange().text; ? ? ? ? ?//IE?11中改為如下:document.selection?---》??window.getSelection?? ????????????????document.selection.empty(); ????????????????objPreviewImg.style.display?=?"none"; ? ? ? ? ? ? ? ??//隱藏img控件 ????????????????objPreviewDiv.style.filter?=?"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; ????????????????objPreviewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src?=?src; ????????????} ????????}?else?{ ????????????//chrome?firfox都可以 ????????????objPreviewImg.src?=?createFileObj(this.files[0]); ????????} ????} ????function?createFileObj(filePath) ????{ ????????var?url?=?null; ????????if?(window.createObjectURL?!=?undefined)?{ ????????????url?=?window.createObjectURL(filePath); ????????}?else?if?(window.URL?!=?undefined)?{ ????????????url?=?window.URL.createObjectURL(filePath); ????????}?else?if?(window.webkitURL?!=?undefined)?{ ????????????url?=?window.webkitURL.createObjectURL(filePath); ????????} ????????else?{ ????????} ????????return?url; ????} </script> ? //---------------------------------------------------------------------- 以上需要注意的地方是 ?<input?id="upload_img"?type="file"?style="width:0px;height:0px;"?/>?
注意不能用display:none的樣式進行隱藏，否則ie7中無論如何都不能獲取到對應value值。 以上代碼嵌套到iframe中也是可以進行預覽的，如果自己想封裝組件的朋友可以自己再封裝一下，或者用jQuery重寫一下就OK了。 ?
轉載于:https://www.cnblogs.com/workky/p/6061931.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的本地预览图片html和js例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端进阶之路：初涉Less
- 下一篇： SaltStck 搭建Web集群运用示例