jQuery上傳圖片並預覽

寫前端代碼，經常會遇到圖片上傳的功能，有時候會經常借助一些插件來實現，今天我們自己寫一個簡單圖片上傳，並在瀏覽器中預覽，但是預覽的時候，由於瀏覽器的安全限制，我們讀取不到本地磁盤的路徑，所以我們借助HTML5的特性來實現上傳，就是利用files屬性來獲取圖片（文件）的信息，包括名字、大小、尺寸，我們會將圖片轉化為base64,來實現預覽，今天我們先來個簡單的demo給大家看看，其他的不說了，直接上代碼：

HTML代碼

 <form enctype="multipart/form-data">
    <div class="box">
        <input type="file" name="front" class="upload-file">
         <a href="javascript:;">側面</a>
         <img src="" alt="">
    </div>
</form>

JS 代碼

$(function () {
    function imgPreview(fileDom,e,ele){
        //獲取文件
        var file = fileDom.files[0];
        var supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
        if(!(supportedTypes.indexOf(file.type)>-1)){
            alert('請選擇.jpg、.png格式圖片')
            return;
        }
        var uploadFiles = e.target.files || e.dataTransfer.files;
        console.log(file.type);
        var size=uploadFiles.length;
        for(var i=0;i<size;i++){
            /*讀取文件*/
            var reader=new FileReader();
            reader.readAsDataURL(uploadFiles[i]);
            reader.onload=function (e) {
                var imgBase=e.target.result;
                ele.siblings('img').attr('src',imgBase).show()
            }
        }

    }
    $('.upload-file').change(function (e) {
        imgPreview(this,e,$(this));
    })
});