jQuery實現(xiàn)的上傳圖片本地預覽效果簡單示例
更新時間：2018年03月29日 10:33:14 作者：tengxing007
這篇文章主要介紹了jQuery實現(xiàn)的上傳圖片本地預覽效果,結合實例形式分析了jQuery上傳圖片本地預覽所涉及的相關頁面元素屬性動態(tài)操作實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的上傳圖片本地預覽效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chabaoo.cn jquery上傳圖片本地預覽效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 獲取FileList的第一個元素
alert(document.getElementById('upload').files[0]);
var f = document.getElementById('upload').files[0];
src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src
})
</script>
</body>
</html>
運行效果：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:
相關文章
jQuery Ajax async=>false異步改為同步時,解決導致瀏覽器假死的問題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時,解決導致瀏覽器假死的問題，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2019-07-07
jQuery1.6 使用方法，需要的朋友可以參考下。2011-11-11
這篇文章主要介紹了jQuery對指定元素中指定字符串進行替換的方法,涉及jQuery針對字符串的匹配與替換的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
jquery鍵盤事件介紹，使用jquery的朋友可以參考下。2011-01-01
jQuery ajax全局函數(shù)處理session過期后的ajax跳轉問題
這篇文章主要介紹了基于jQuery的全局ajax函數(shù)處理session過期后的ajax操作的相關資料,需要的朋友可以參考下2016-06-06
jQuery的一些注意...2006-12-12
40個有創(chuàng)意的jQuery圖片和內容滑動及彈出插件收藏集之三
在網頁的首頁或圖片專題頁面很多地方都會用到圖片滑動插件來循環(huán)切換多張圖片，并且用戶可以點擊左右按鈕來切換圖片。2012-01-01
這篇文章主要介紹了jquery實現(xiàn)帶二級菜單的導航示例,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了jquery uploadify如何取消已上傳成功文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
查看大圖的效果想必大家在瀏覽網頁時都有看過吧，其實實現(xiàn)起來很簡單的，下面有個不錯的示例，喜歡的朋友可以參考下2013-11-11