input type=file 選擇圖片並且實現預覽效果詳解
- 小云云原創
- 2018-01-02 16:00:294134瀏覽
本文主要為大家帶來一篇input type=file 選擇圖片並且實現預覽效果的實例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
透過標籤，給它指定type類型為file，可提供檔案上傳；
accept：可選擇上傳類型，如：只要傳遞圖片，且不限制圖片格式，為image/*；
multiple：規定是否可以選擇多個檔案；
規定只可上傳圖片，且可以選擇多個檔案
<input type="file" accept="image/*" multiple="multiple"/>
當然，直接一個input type=file 只能選擇上傳的檔案/資源，如果我們需要在選擇圖片之後，在目前頁面實現預覽效果，那麼我們可以如下方式來實作
HTML程式碼
<body> <p id="box"> <img id="imgshow" src="" alt=""/> </p> <p id="pox"> <input id="filed" type="file" accept="image/*"/> </p> </body>
css樣式檔
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid #858585;
}
#imgshow{
width: 100%;
height: 100%;
}
#pox{
width: 70px;
height: 24px;
overflow: hidden;
}
</style>
JS程式碼
<script>
//在input file内容改变的时候触发事件
$('#filed').change(function(){
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#filed').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload=function(e){
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#imgshow').get(0).src = e.target.result;
}
})
</script>
*以上js程式碼中有使用到jQuery，因此要引入jQuery檔案
相關推薦：
HTML5 Plus 實作手機APP拍照或相簿選擇圖片上傳功能的實例代碼
以上是input type=file 選擇圖片並且實現預覽效果詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn