HTML5 圖片上傳預覽

時間 2019-11-13

標籤 html5 html 圖片上傳預覽欄目 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<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>

<h3>HTML5 圖片上傳預覽</h3>

<input id="img" type="file" accept="image/*" /><br />

<div></div>

</body>
</html>

相關文章

相關標籤/搜索

android上傳圖片

裁剪，預覽，上傳

圖片瀏覽器

瀏覽器信息

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<