原始介面                展示介面                          非圖片格式介面

為了實現上圖的功能，點選“請選擇商品圖片”，然後就能選擇電腦裡的圖片並在方框裡顯示出來，如果不是圖片格式，提示報錯。

主體部分（主要是為了展示）

<div class="Food_img">
        <span>商品照片</span>
        <div class="Food_addImg" id="Food_addImg">
        	<img src="" alt="">
    	</div>
</div>
<span class="msg"></span>
<div class="tip">請選擇商品圖片
	 <input type="file" id="file_input">
</div>
 

為了清除input 預設樣式的影響，設定了opacity=0;這樣就能用外層的div來做顯示，這樣就不用考慮每個瀏覽器對input的顯示問題。

		.Food_img{
		    width: 100%;
		  
		    background-color: #fff;
		    padding: 10px;
		}
	 	.Food_img>div{
		    width: 78px;
		    height: 78px;
		    border: 1px solid #ddd;
		    margin-top: 10px;
		    line-height: 78px;
		    text-align: center;
		}
		#Food_addImg>img{
		    width: 100%;
       height: 100%;
		}
		.msg{
		    font-size: 15px;
                    color: red;
                    padding-left: 5px;
		}
		.tip{
		    position: relative;
		    margin-top: 4px;
                    margin-left: 4px;
		}
		.tip>#file_input{
		    position: absolute;
		    top: 0;
		    left: -120px;
		    z-index: 3;
		    opacity: 0;
		}
 

var input = document.getElementById("file_input");
	var img = document.getElementsByTagName("img")[0];
	var imageType = /image.*/; //為了進行正則檢驗，看格式是否正確，也可以用var patn = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
	var msg = document.getElementsByClassName("msg")[0];
	var getOnloadFunc = function(aImg) {
		return function(evt) {
			aImg.src = evt.target.result;  //得到input裡面上傳的檔案地址,簡單來講檔案地址就是input.value
		};
	}
		input.addEventListener("change", function(evt) {
		    for (var i = 0, numFiles = this.files.length; i < numFiles; i++) {  //有多張圖片一起，需要遍歷
		        var file = this.files[0];
		        if (!file.type.match(imageType)) {                    //如果使用的是path引數，這裡應該變成patn.test(input.value)
		        	msg.innerHTML = "您選擇的似乎不是影象檔案,";  //當格式錯誤時，有一個錯誤提示
		           continue ;      //如果只有單張圖片，不需要迴圈，可以用return代替
		        }
msg.innerHTML = "";

			    var reader = new FileReader();
			    reader.onload = getOnloadFunc(img);
			    reader.readAsDataURL(file);
		    }
		}, false);