上传图片表单file之我的理解

前段时间做到上传图片的功能，虽然是个小例子，但是我觉得有必要分享一下我的心得和体会，以供大家参考借鉴。好了，废话不多说，上代码。

HTML：

//按钮部分
<a href="javaScript:;"><input type="file" name="" id="" value="" onchange="getImgURL(this)"/></a>

//输入框部分
<div class="textarea" contenteditable="true"  name="content">推荐理由</div>
           

CSS：

footer a{
    width: %;
    height: rem;
    display: block;
    border-top: px solid #E6E6E6;
    float: left;
    background: white;
}
footer a:nth-of-type(1){
    border-right: px solid #E6E6E6;
    background: url(../image/camera.png) no-repeat center center;
    background-size: rem rem;
}
footer input{
    width: %;
    height: rem;
    opacity: ;
}
           

这里我重点说一下input中file的样式美化。因为file自带文字和按钮，看起来非常难看，那我们怎么做呢？我们给input设置透明度为‘0’!,让它“消失”，宽度和外面的a标签是一样的，都是100%，然后给外面的a标签添加背景图，这样的话就只有图标了，从而达到美化的效果。接下来我们说说js

JS：

//获取图片链接
function getImgURL(node) {    
    var imgURL = "";      
    try{     
        var file = null;  
        if(node.files && node.files[] ){  
            file = node.files[];   
        }else if(node.files && node.files.item()) {                                  
            file = node.files.item();     
        }     
        //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
        try{  
            //Firefox7.0   
            imgURL =  file.getAsDataURL();    
            //alert("//Firefox7.0"+imgRUL);                           
        }catch(e){  
            //Firefox8.0以上                                
            imgRUL = window.URL.createObjectURL(file);  
            //alert("//Firefox8.0以上"+imgRUL);  
        }  
     }catch(e){      //这里不知道怎么处理了，如果是遨游的话会报这个异常                   
        //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
        if (node.files && node.files[]) {                            
            var reader = new FileReader();   
            reader.onload = function (e) {                                        
                imgURL = e.target.result;    
            };  
            reader.readAsDataURL(node.files[]);   
        }    
     }   
    creatImg(imgRUL);  
    return imgURL;  
}  

//生成img标签
function creatImg(imgRUL){   //根据指定URL创建一个Img对象  
    var textHtml = "<img src='"+imgRUL+"'/>";  
    $(".textarea").append(textHtml);  
}  

整体思路：点击上传按钮的时候，获取本地图片的url，然后在输入框中生成img标签。
此处使用的输入框是contenteditable="true"属性的输入框代替textarea。
           

eg：

Tips：如果作者的文章有帮到你，请你不要嫌麻烦，登录账号给作者留一句言，也是对作者的成果的肯定。谢谢。有不足的地方希望能够指出来，共同进步。