input type=''file''美化 及 文件上传img src显示问题

                

                  

                                     


                  原始界面                               展示界面                                         非图片格式界面
为了实现上图的功能，点击“请选择商品图片”，然后就能选择电脑里的图片并在方框里显示出来，如果不是图片格式，提示报错。

主体部分（主要是为了展示）
<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;
}JS部分
   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);