Section1單張上傳和預覽：

思路：用<input type="file"/> 觸發onchange事件，取出e.target.files || e.target.dataTransfer.files, 將其轉為window.createObjectURL(file)有效的url 寫入<img src=""/>的src中就可以預覽了。然後將這個url用new FormData().append("",url); 設定ajax的processData:false,contentType:false;就可以上傳到後臺了。

    請看程式碼：

<div class="facemain" 
 
id="facemain">
        <div class="viewface-container">
                <img class="viewfaceimg" id="viewfaceimg" src="../../../img/weixin/weixin-v2/faceimg-default.jpg"/>
        </div>
        <div class="faceupload-div">
                <label id="face_label" class="face-label"
 
><input id="face_input" class="face-input" type="file">
拍照或選擇相片
                </label>
                <span class="saveface-btn" id="saveface_btn">
儲存
                </span>
        </div>
        <img class="face-closebtn" src="/newPage/img/weixin/weixin-v2/qcode-closebtn.png" 
 
@click.stop="closeFace"/>
</div>

js:

$("#face_input").on("change",function(obj){
        obj.stopPropagation();
var $this = $(this);
var files = obj.target.files || obj.dataTransfer.files;
if(files.length > 1){
                files = files[files.length - 1];//取最後一張
layer.msg('最多隻能上傳1張圖片',{time:og.ogLayerTime,icon:5});
}
        if (imgFilter(files) == false) {
                return false;
}

        //判斷上傳的圖片跟頁面上的圖片，如果已經上傳了，不需要重新上傳
var img  = $("#viewfaceimg");//正在傳的
$.each(files, function (i, item) {//正在上傳的files(item = 每一個file)
var objUrl = getObjectURL(item);
img.data("img",item);
img.attr("src",objUrl);
})
        $this.val("");//清空剛才選中的圖片（PS:bug,因為若選中a，如果重新選擇a，就不會再觸發change事件所以必須要清空file）
function getObjectURL(file) {
                var url = null;
if (window.createObjectURL != undefined) {//基礎建立url的方法
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;
};
//圖片過濾
function imgFilter(files) {
                var a = true;
for (var i = 0, len = files.length; i < len; i++) {
                        var file = files[i];
if (file.type.indexOf("image") == 0) {//
if (file.size >= 1048576) {// 1M
layer.alert('您這張"' + file.name + '"圖片過大，應小於1M，請重新上傳');
a = false;
}
                        } else {
                                layer.alert('檔案"' + file.name + '"不是圖片。請重新上傳');
a = false;
}
                }
                return a;
}
})

//儲存頭像
$("#saveface_btn").click(function(e){
        e.stopPropagation();
var img = $("#viewfaceimg").data("img");
var mydata = new FormData();
mydata.append("headImage",img);
if(og.isNotEmpty(img)){
          layer.load();
$.ajax({
                        type:"post",
dataType:"json",
data:mydata,
cache:false,
processData: false,
contentType: false,
url:"/wx/user/uploadFace",
success:function(data){
                                if(data.status){
                                        layer.msg('恭喜您上傳成功。',{time:og.ogLayerTime,icon:6});
//location.href = "/newPage/html/weixin/weixin-v1/myinfo.html";
return false;
}else{
                                        layer.alert(data.message);
return false;
}
                        },
complete:function(){
                              layer.closeAll("loading");
}
                })
        }else{
                layer.msg('請您先選擇一張圖片。',{time:og.ogLayerTime,icon:5});
return false;
}
})