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));
    })
});