註意：上傳文件一般使用的是input標簽，如果想要改樣式，讓input不顯示，可以把input標簽放入<leabel>標簽中，然後讓input標簽 display：none；

案例1：上傳單個圖片，添加按鈕不消失

html

<div class="addPicture clearfix">
    <!-- 圖片顯示區域 -->
    <div class="addPictureImg"></div>
    <!-- 添加圖片 -->
    <div class="addPictureDiv">
        <
 
label class="pictureDivCon">
        　　<input type=‘file‘ id="imgInp">
           <i class="iconfont icon-tianjiatupian"></i>
           <p>點擊添加圖片</p>
        </label>
    </div>
</div> 

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 = "<img src=‘#‘ alt=‘添加圖片‘ class=‘addImg1‘ id=‘blah‘><i class=‘iconfont icon-guanbi addPictureClose‘></i>"
            $(‘.addPictureImg‘).html(str)
            $(‘.addPictureImg‘).css(‘display‘,‘block‘)
            //點擊關閉圖標刪除圖片
            $(‘.addPictureClose‘).click(function() {
                $(this).parent().css(‘display‘,‘none‘);
            });
         });
    }

案例2：上傳圖片，圖片覆蓋添加按鈕

html

<div class="purchConRight uploadImg">
        //此處的添加圖片按鈕是個圖片
    <img src="../../uploads/camera.png" width="100" height="100">
    <input type="file" onchange="uploads(this)"/>
</div>

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

js上傳圖片