input上傳圖片並預覽

首先說一下input

你們都知道上傳文件，圖片是經過input 的file進行上傳的。

1. 首先是樣式

你們都知道input在HTML的代碼爲 <input type="file">；在頁面的樣式是不能夠更改的，以下圖

可是最爲一個投機取巧的前端，一切樣式都是能夠修改的。
效果圖以下

代碼：
<input type="file" name="file" id="file" class="inputfile" />
<label for="file" class='btn btn-success'>Choose a file</label>
其中隱藏input原始樣式的辦法有幾種我就隨便寫幾個僅作參考。也就是類.inputfile的css內容

.inputfile { opacity: 0; }

或者

.inputfile { position:absolute;clip:rect(0 0 0 0); }

也能夠

.inputfile { z-index: -11111; width: 0px; height: 1px; }

總之有不少辦法，只是給你們一個思路。

2. input的file類型控制

input的標籤有一個accept屬性，accept 屬性只能與 <input type="file"> 配合使用。它規定可以經過文件上傳進行提交的文件類型。
由於咱們須要作的是上傳圖片因此這裏咱們是<input type="file" accept="image/*">；效果圖以下

可是在Chrome瀏覽器下，可能會有文件選擇窗口打開很是慢點（大約慢5秒左右呢）問題，所以，若是僅僅是上傳圖片，建議使用：<input type="file" accept="image/png, image/jpeg, image/gif, image/jpg">
固然accept還有一些其餘的值，如

<input type="file" webkitdirectory directory multiple/>

        <label for="file">上傳文件夾</label>

        <br>

        <input type="file" accept="application/pdf"/>

        <label for="file">上傳pdf文件</label>

        <br>

        <input type="file" accept="audio/x-mpeg"/>

        <label for="file">上傳mp3文件</label>

        <br>

        <input type="file" accept="text/html"/>

        <label for="file">上傳html文件</label>

多個屬性值使用逗號分隔<input accept="audio/*,video/*,image/*">

3. 在form中的使用

若是想使用瀏覽器原生特性實現文件上傳(如圖片)效果，父級的form元素有個東西不能丟，就是：enctype="multipart/form-data" enctype屬性規定在發送到服務器以前應該如何對錶單數據進行編碼，默認的編碼是：」application/x-www-form-urlencoded「。對於普通數據是挺適用的，可是，對於文件什麼的，就不能亂編碼了，該什麼就是什麼，只能使用multipart/form-data做爲enctype屬性值。

4. 圖片預覽

簡單的來講就是，就是替換img的src；而讀取URL有filereader 和 URL.createObjectURL 兩種預覽方式。這兩種方式能夠得到上傳圖片的名字（name）

---

filereader 的方法：

//filereader 的方法
<form action="" enctype="multipart/form-data">

    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>

    <img src="" id="show" width="200">

</form>

<script>
 function changepic() {
 var reads= new FileReader();
 f=document.getElementById('file').files[0];
 reads.readAsDataURL(f);
 reads.onload=function (e) {
 document.getElementById('show').src=this.result;
 };
 }
 </script>

createObjectURL的方法

//createObjectURL的方法
<form action="" enctype="multipart/form-data">

    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>

    <img src="" id="show" width="200">

</form>

<script>
 function changepic(obj) {
 //console.log(obj.files[0]);//這裏能夠獲取上傳文件的name
 var newsrc=getObjectURL(obj.files[0]);
 document.getElementById('show').src=newsrc;

 }
 //創建一個可存取到該file的url
 function getObjectURL(file) {
 var url = null ;
 // 下面函數執行的效果是同樣的，只是須要針對不一樣的瀏覽器執行不一樣的 js 函數而已
 if (window.createObjectURL!=undefined) { // basic
 url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
 url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
 }
 </script>

以上是兩種方法，按照前輩們的說法，creatObjectURL能夠有更好的性能，或許是瀏覽器自帶接口的緣由, 能夠處理的更快。
基於上述的瞭解的方法，本身作了一個demo；效果圖以下，

預覽圖以下：

由於文件太大；詳細資源代碼請到圖片上傳預覽下載；如急需的請留言。

原文地址：https://blog.csdn.net/weixin_38023551/article/details/78318532