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