注意：上传文件一般使用的是input标签，如果想要改样式，让input不显示，可以把input标签放入<leabel>标签中，然后让input标签 display：none；

案例1：上传单个图片，添加按钮不消失

 html

     
    
          
      
    
          
      
        
               　　                      
点击添加图片
            
      
     

css

.addPictureImg {
        width: 28%;    float: left;    position: relative;    display: none;    margin-right: 1rem;    margin-bottom: 1rem;}.addImg1{
        width: 100%;    height: 80px;        display: inline-block;}.addPictureDiv {
        float: left;    width: 28%;    height: 80px;    text-align: center;    margin-right: 1rem;    background-color: #EBEBEB;    vertical-align: middle;}.pictureDivCon {
        margin-top: 2rem;    display: block;}.pictureDivCon input{
        display: none;}.addPictureDiv i{
        font-size: 3rem;    color: #50A4FA;}.addPictureDiv p {
        font-size: 0.8rem;}

js

//上传图片function readURL(input) {    if (input.files && input.files[0]) {            var reader = new FileReader();            reader.onload = function (e) {                $('#blah').attr('src', e.target.result);            };            reader.readAsDataURL(input.files[0]);        }    }    $("#imgInp").change(function(){        readURL(this);    });    //上传文件的图片    var addPictureImgdy = $('.addPictureImg')    //点击input时动态创建Img    for(var i=0; i<10; i++) {        $('#imgInp').click(function() {    　　       var str = ""            $('.addPictureImg').html(str)            $('.addPictureImg').css('display','block')            //点击关闭图标删除图片            $('.addPictureClose').click(function() {                $(this).parent().css('display','none');            });         });    }

案例2：上传图片，图片覆盖添加按钮

html

     
              //此处的添加图片按钮是个图片    
          
      
     

css

.uploadImg{
        position: relative;}.uploadImg input[type=file]{
        position: absolute;    left: 0;    height: 100px;    width: 100px;    opacity: 0;}

js

function uploads(fileDom) {    //判断是否支持FileReader    if (window.FileReader) {        var reader = new FileReader();    } else {        alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");    }    //获取文件信息    var file = fileDom.files[0];    var imageType = /^image\//;    //是否是图片    if (!imageType.test(file.type)) {        alert("请选择正确的图片！");    }else {    //读取完成            reader.onload = function (e) {                //获取图片dom                var img = $(fileDom).prev();                //图片路径设置为读取的图片                img[0].src = e.target.result;            };            reader.readAsDataURL(file);    }}