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);