html結構樣式如下：

 <div class="addpic">
    	<button>新增圖片</button>
    	<form>
        	<input id="logoimg" class="addlogo" type="file" multiple accept="image/*" name="logo">
        </form>
    </div>
    <img id="showlogo" src="" alt="">

從樣式上說應不顯示input元素的輸入框，這時需將input設定為透明樣式，然後將其覆蓋到button元素上方，這時方可實現點選button上傳圖片。將accepted設定為“image/*”，則只允許圖片類檔案上傳。

Css樣式如下

.addpic{
	position:relative;
	margin-left:100px;
	width:95px;
	height:30px;
}
.addlogo {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    cursor: pointer;
    font-size: 30px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

function readFiles(evt){
	var files=evt.target.files;
	if(!files){
		console.log("the file is invaild");
		return;
	}
	for(var i=0, file; file=files[i]; i++){
		var imgele=new Image();
		var thesrc=window.URL.createObjectURL(file);
		imgele.src=thesrc;
		imgele.onload=function(){
			$("#showlogo").attr("src",this.src);
		}
	}
}
 

$(document).ready(function(){
	$("#logoimg").change(function(e){
		readFiles(e)
	});
});