老師沒有給我們實現這種功能，自己摸索了發現h5圖片的src屬效能夠賦予值可以是絕對路徑，相對路徑和base64編碼。故有三種思路實現圖片上傳功能，沒用伺服器，用的是電腦本地。    

       一：利用絕對路徑實現：圖片上傳預覽功能的實現最簡單的方式就是獲取上傳圖片的絕對路徑，但出於安全的考慮，除了ie能直接訪問本地檔案的絕對路徑，其它瀏覽器用fakepath掩蓋了路徑或者禁止訪問，部分瀏覽器還可以呼叫特殊方法獲得檔案上傳的絕對路徑，像360，搜狗等使用者普遍使用的瀏覽器是不允許訪問本地路徑的。像這種瀏覽器，一種就是修改設定允許訪問本地路徑，另一種就是換一種思路啦。這裡簡單介紹ie,搜狐通過訪問本地圖片路徑實現圖片上傳預覽功能。

 function checkimg(obj){
    	//獲取到上傳檔案的路徑
    	var filename = obj.value;
    	//只能上傳圖片格式的檔案
    	var index = filename.lastIndexOf(".");
    	var name =filename.substring(filename.lastIndexOf("."));
    	if(name!=".jpg"&&name!=".png"&&name!=".gif"){
    		alert("只能上傳.jpg.png.gif檔案");
    		obj.value="";
    	}else{
    		realPath=getPath(obj);//獲取檔案上傳的路徑,網上的程式碼，試了下ie火狐能用，谷歌不能用
    	 document.getElementById("img").src=realPath;
    	}
    }
 function getPath(obj) {//獲取絕對路徑函式
     if(obj)
 {  
     if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
        obj.select();
        return document.selection.createRange().text;
    }   
     else if(window.navigator.userAgent.indexOf("Firefox")>=1)
     {
        if(obj.files)
         {
                return window.URL.createObjectURL(obj.files[0]);
          }
          return obj.value;
     }
    return obj.value;
}
 }
 

二：利用相對路徑實現：比較麻煩的一種，有的瀏覽器不能訪問本地圖片的絕對路徑，所以就想可以訪問相對路徑啊，但是這樣做的前提就是必須上傳檔案到檔案上傳的位置，通過訪問相對路徑訪問到檔案上傳位置裡的圖片，但這只是預覽，如果更換圖片的話上一個圖片就不要了，所以必須新增一個刪除圖片的方法。這種方法雖然不適用，但是可行，這裡就不寫程式碼實現了。

三：利用base64編碼實現：base64可以對圖片的內容進行編碼，js中FileReader物件的readAsDataURL方法，可以把圖片資料轉成base64字串資料，然後把這個base64字串資料賦值給一個圖片標籤的src，瀏覽器獲得這個base64編碼格式的字串後再解析成圖片。

//input標籤，獲取本地圖片
<input type="file" onchange="uploadImg(this)" />

//預覽圖片標籤
 <img id="viewImg"/>


 function uploadImg(fileDom) {

    // 獲取圖片資料物件
    var file = fileDom.files[0];
//對圖片內容進行base64編碼
    var reader = new FileReader();
    reader.readAsDataURL(file);

    //確保檔案成功獲取，base64資料量比較大
    reader.onload = function (event) {
        var e = event || window.event
        var img = document.getElementById("viewImg");
        img.src = e.target.result;
        //或者 img.src = this.result; 因為e.target == this
    }
}