JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能
更新時間:2017年07月22日 08:58:15 作者:啊宏ahong
這篇文章主要為大家詳細(xì)介紹了JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了HTML5圖片在線預(yù)覽的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <title>HTML5圖片預(yù)覽</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <style> .hide { display:none; } </style> </head> <body> <h3>請選擇一張JPG/GIF的圖片</h3> <form name="form0" id="form0" > <input type="file" name="file0" id="file0" multiple="multiple" /> <br><br><img src="" id="img0" width="120" class="hide"> </form> <script> $("#file0").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (objUrl) { $("#img0").attr("src", objUrl); $("#img0").removeClass("hide"); } }) ; function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js HTML5多圖片上傳及預(yù)覽實(shí)例解析(不含前端的文件分割)
- HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳
- 基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
- JS HTML5拖拽上傳圖片預(yù)覽
- JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果完整實(shí)例【測試可用】
- JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- js+html5繪制圖片到canvas的方法
- js HTML5 canvas繪制圖片的方法
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動畫特效
- javascript實(shí)現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
相關(guān)文章
小議Function.apply()之二------利用Apply的參數(shù)數(shù)組化來提高 JavaScript程序性能
小議Function.apply()之二------利用Apply的參數(shù)數(shù)組化來提高 JavaScript程序性能...2006-11-11javascript 可控式透明特效實(shí)現(xiàn)代碼
透明特效是script.aculo.us提到的特效中最簡單的特效之一。既然是特效,必須涉及時間與空間的概念。時間我們可以用setTimeout與setInterval,個人比較喜歡setTimeout,雖然它每次調(diào)用都重復(fù)注冊,但可控性比較好。2010-01-01JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實(shí)現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-04-04基于js實(shí)現(xiàn)判斷瀏覽器類型代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)判斷瀏覽器類型代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07使用JavaScript計(jì)算前一天和后一天的思路詳解
這篇文章主要介紹了使用JavaScript計(jì)算前一天和后一天的思路,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12