jQuery實現(xiàn)上傳圖片前預覽效果功能
更新時間:2017年08月03日 14:30:46 作者:祈澈姑娘
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)上傳圖片前預覽效果功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
網(wǎng)上很多代碼實現(xiàn)了上傳圖片這個功能,但不支持實時預覽圖片,下面實現(xiàn)了上傳圖片前預覽效果功能,具體如下
效果如圖:
代碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery上傳圖片之前可以預覽效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <input id="file" ;="" onchange="c()" type="file"><br> <img src="" id="show" width="200"><script> function c () { var r= new FileReader(); f=document.getElementById('file').files[0]; r.readAsDataURL(f); r.onload=function (e) { document.getElementById('show').src=this.result; }; }</script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Jquery ajaxsubmit上傳圖片實現(xiàn)代碼
- 基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預覽效果代碼
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery 批量上傳圖片實現(xiàn)代碼
- 使用jQuery實現(xiàn)驗證上傳圖片的格式與大小
- 簡單實現(xiàn)jQuery上傳圖片顯示預覽功能
- jQuery AjaxUpload 上傳圖片代碼
- JQuery+ajax實現(xiàn)批量上傳圖片(自寫)
- 基于Jquery插件Uploadify實現(xiàn)實時顯示進度條上傳圖片
- jquery實現(xiàn)上傳圖片功能
相關(guān)文章
jQuery中驗證表單提交方式及序列化表單內(nèi)容的實現(xiàn)
之前項目中使用的表單提交方式,使用form()方法可以將提交事件脫離submit按鈕,綁定到任何事件中,下面有個不錯的示例大家可以參考下2014-01-01jquery ajax對特殊字符進行轉(zhuǎn)義防止js注入使用示例
如果有人在留言里寫入了js語句,這結(jié)語句都會被執(zhí)行.解決辦法就是對這些特殊字符進行轉(zhuǎn)義再顯示出來,下面有個不錯的示例,感興趣的朋友可以參考下2013-11-11防止jQuery ajax Load使用緩存的方法小結(jié)
本篇文章主要是對防止jQuery ajax Load使用緩存的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery ajaxfileupload異步上傳插件使用詳解
這篇文章主要為大家詳細介紹了jquery ajaxfileupload異步上傳插件的使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02基于jQuery實現(xiàn)點擊最后一行實現(xiàn)行自增效果的表格
現(xiàn)在任何事務都追求效率和人性化,當然網(wǎng)頁效果也是如此,如果一個可以編輯數(shù)據(jù)的表格,編輯到最后一行的時候,點擊可以自動添加一行,這樣算是一個比較人性化的效果,可以免去一絲勞頓之苦,下面分享一段這樣的代碼2016-01-01