首先說一下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；效果圖如下，

預覽圖如下：

因為檔案太大；詳細資原始碼請到圖片上傳預覽下載；如急需的請留言。

來自大神的啟發，微博張鑫旭;
部落格讀取URL的選擇