這次帶給大家H5如何做圖片上傳預覽元件，H5做出圖片上傳預覽元件的注意事項有哪些，以下就是實戰案例，一起來看一下。
本人開發環境是windows10測試瀏覽器是chrome 和火狐
如遇不相容瀏覽器的可嘗試升級瀏覽器或Google一下(～￣▽￣)～
#1 .檔案的單選與多選
預設情況下屬於單選,新增multiple屬性後就允許多選檔案了
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>单选:<input type="file"/></label>
<label>多选:<input type="file" multiple="multiple"/></label>
</body></html>2 .取得檔案物件
開啟瀏覽器控制台然後選擇檔案看控制台變更
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
<script>
function getFilesInfo(f){ console.log(f);
} </script>
<label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
<script>
function getFilesInfo2(evt) { var files = evt.target.files;
console.log(files);
} document.getElementById('files').addEventListener('change', getFilesInfo2, false); </script>
<label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
<script>
function getFilesInfo3(){ var files=document.getElementById("fileInput").files; console.log(files);
} </script>
</body></html>3.常用屬性
在第二步驟我們已經在控制台中看到了檔案了,展開我們來看看有哪些常用屬性吧
常用屬性說明:
name-檔案名稱
size-大小
type-檔案類型
lastModified-最後修改日期
來來 我們試試看一些資訊給輸出到頁面吧
<!doctype html><html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="file" id="files" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
var output = [];
for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>4.限製檔案大小與檔案格式
說到圖片的上傳預覽就不得不對上傳的檔案進行大小與格式的過濾
假設我們現在只允許上傳jpg和png且檔案大小為2mb以內很簡單只許判斷檔案資訊就可以了
如果你不清楚你要過濾的文件類型你可以在控制台查看檔案類型然後複製貼上
當然你也可以在input標籤裡設定accept="image/*" 來實現只允許輸入圖片檔案
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>过滤出图片</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body> </html>5.預覽範例
透過動態建立img標籤以及對img標籤src屬性綁定ObjectURL實作預覽
範例
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>预览</h3>
<input type="file" id="files" multiple accept="image/*" />
<output id="list"></output>
<script>
function handleFileSelect(evt) { var files = evt.target.files; var output = []; for(var i = 0, f; f = files[i]; i++) { if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
output.push("![]("+URL.createObjectURL(f)+")");
}
} document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
</body></html>6.單圖上傳預覽範例
範例
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>简单预览示例</h3>
<label id="fileBox" style="border: 1px #ccc solid;display:block;width: 100px;height:100px;background-clip:border-box;background-origin:padding-box;background-size:cover">
<input type="file" hidden="hidden" style="display: none;" onchange="fileSelect(this.files)"/>
</label>
<script>
function fileSelect(f) {
if(!f){ return;
}
f=f[0]; if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){ document.getElementById('fileBox').style.backgroundImage="url(" + URL.createObjectURL(f)+ ")";
}
} </script>
</body> </html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是H5如何做圖片上傳預覽元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
