js上傳圖片
阿新 • • 發佈:2017-09-28
for 不顯示 tar eight gin 單個 ext idt 添加
註意:上傳文件一般使用的是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上傳圖片