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