想要實現的功能是，點選一個上傳的按鈕，然後選中上傳圖片，在頁面上可以看到上傳的圖片

一開始是

點選這個+之後，上傳的圖片就出現在+上，將其覆蓋

實現的思路如下：

html頁面上的要有input type=file 來上傳檔案，由於上傳按鈕太醜了，所有將其隱藏起來，用add.png這個圖片顯示到頁面上，accept是設定上傳檔案的型別，然後點選時呼叫getupload（）事件

<input type="file" id="upload_file2" style="display: none;" accept="image/jpeg, image/gif,image/png,image/jpg" />
<div id="cj2">
   <img id="img2" onclick="getupload('img2','upload_file2')" src="images/add.png">
</div>
 

getupload（）裡面第一步執行上傳，然後讀取圖片的內容，再返回即可。（看註釋）

//圖片上傳、讀取圖片和在頁面上顯示
function getupload(ids,upids){
    //點選隱藏的上傳按鈕file 圖片上傳
    $("#"+upids).click();
    $("#"+upids).off("change");//防止多次觸發change事件
    $("#"+upids).change(function(){
    	//獲取讀取的File物件
        var file = this.files[0] ? this.files[0] : null;
        if (!file) { return false; }
		var file_reader = new FileReader();//讀取圖片的操作 
        //FileReader主要用於將檔案內容讀入記憶體，通過一系列非同步介面，可以在主執行緒中訪問本地檔案
		file_reader.readAsDataURL(file);//讀取圖片的內容生成的base64編碼的圖
        //讀取完成後，執行該回調函式，它會返回讀取的結果result		
        file_reader.onload = (function(){		
    		var image_url = this.result;  // 此時的圖片已經儲存到了result中	
    		$("#"+ids).attr('src', image_url);  // 建立圖片標籤 
		});
		
    });
}