文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

首頁 > php教程 > PHP开发 > 主體

input file上傳圖片預覽功能實例碼

高洛峰

發布： 2016-12-09 09:55:19

原創

1228 人瀏覽過

input file上傳圖片預覽其實很簡單，只是沒做過的感覺很神奇，今天我就扒下她神秘的面紗，其實原理真的很簡單，下面透過一段程式碼大家都明白了。

具體程式碼如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" multiple id="inputs"/> //multiple(多文件上传)
<div id=&#39;dd&#39;></div>
<script>
$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img src=&#39;"+reader.result+"&#39;>";
};
}
</script>
</body>
<html>

登入後複製

實作上傳圖片直接預覽，避免提交後在讀取圖片的冗餘過程

相關標籤：

input file

來源：php.cn

上一篇：jQuery實作的小圖列表，大圖展示效果投影片範例下一篇：jQuery透過ajax快速批次提交表單數據

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章