您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“html5中如何實現圖片上傳預覽功能”,內容詳細,步驟清晰,細節處理妥當,希望這篇“html5中如何實現圖片上傳預覽功能”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><meta name="author" content="EdieLei" /><title>HTML5 圖片上傳預覽</title><script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script</a>><script type="text/javascript">$(function(){ $('#img').change(function(){ var file = this.files[0]; //選擇上傳的文件 var r = new FileReader(); r.readAsDataURL(file); //Base64 $(r).load(function(){ $('div').html('<img src="'+ this.result +'" alt="" />'); }); });});</script></head><body><h4>HTML5 圖片上傳預覽</h4><input id="img" type="file" accept="image/*" /><div></div></body></html>
讀到這里,這篇“html5中如何實現圖片上傳預覽功能”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。