使用jquery+ajax實現圖片的上傳與預覽

效果預覽：

佈局思路：

（1）外層一個div，用來放上傳圖片的背景圖和展示圖

（2）內層兩個input,一個text類型加屬性hidden,用來將上傳圖片後得到的路徑進行賦值給value來提交。一個file類型用來實現文件上傳。

HTML：

<div style="width:130px;height:70px;background:url(../images/1.png) center center / cover no-repeat;">
    <input type="text" id="submitImg"  name="content_img1" value="" hidden>
    <input type="file" id="uploadImg"  name="" onchange="preview(this,'srcBgName')" value="">
</div>

JS：

$("#uploadImg").change(function(){
    var formData = new FormData();
    formData.append("image",$("#uploadImg")[0].files[0]);
    //調用上傳圖片函數
    uploadImages(formData,"#submitImg");
});
//上傳圖片函數
function uploadImages(jsonData,ele){
    var uid = xxx;
    var token = yyy;
    jsonData.append("uid",uid);
    jsonData.append("token",token);
    $.ajax({
        url: url,
        type: 'post',
        data: jsonData,
        processData: false,
        contentType: false,
        success: function (data) {
            //上傳成功後，將返回的圖片路徑賦值給隱藏的input的value,從而進行提交
            $(ele).val(data.data);
            //上傳成功後給用戶提示
            layer.alert(data.api_msg);
        },
        error: function (data) {
            console.info(data);
        }
    });
}
//圖片的展示預覽
function preview(imageFile,srcBgName) {
    //拼接沒上傳圖片前的背景圖路徑
    var srcbgUrl = "../images/" + srcBgName + ".png";
    //圖片上傳成功後返回的圖片路徑
    if(file.files && file.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $(imageFile).parent().css({
                "background": "url(" + e.target.result + ") center center no-repeat",
                "background-size": "cover"
            });
        }
        reader.readAsDataURL(file.files[0]);
    }else {
        //改選圖片時沒上傳圖片時恢復原背景圖
        $(imageFile).parent().css({
            "background": "url(" + srcbgUrl + ") center center no-repeat",
            "background-size": "cover"
        });
    }
}