admin管理员组文章数量:1656270
最近在做项目的时候需要实现一个手机端上传图片效果,但是本来想用H5 的 multiple属性进行一次性多图上传,无奈安卓系统兼容性硬伤,暂时找不到兼容安卓网页版的多图上传方案,于是就仿了QQ空间网页版的图片上传效果。代码如下:
效果图:
javascript部分:
<script>
//获取文件url
function createObjectURL(blob){
if (window.URL){
return window.URL.createObjectURL(blob);
} else if (window.webkitURL){
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
var box = $("#fileBox .review-box"); //显示图片box
var file = $("#file"); //file对象
var domFragment = document.createDocumentFragment(); //文档流优化多次改动dom
$("#fileBox").on("click", ".file-btn",function(){
var index = $(this).parent().index();
if(index == 6){
alert("最多可以上传4张图片!");
return false;
}
});
//触发选中文件事件
$("#fileBox").on("change", ".file-btn", function(event){
var imgNum = parseInt($("#fileBox .review-box img").length);
if(imgNum < 4){
var file = event.target.files; //获取选中的文件对象
var imgTag = $("<img src=''/>");
var fileName = file[0].name; //获取当前文件的文件名
var url = createObjectURL(file[0]); //获取当前文件对象的URL
//忽略大小写
var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);
var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);
var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);
//判断文件是否是图片类型
if(jpg || png || jpeg){
imgTag.attr("src",url);
}else{
alert("请选择图片类型文件!");
}
//最佳显示
var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>");
imgbox.append(imgTag);
box.append(imgbox);
event.target.parentNode.style.display = "none";
var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style");
$("#fileBox").append(cloneDom);
}
});
$(".review-box").on("click", ".prev-item", function(){
var index = $(this).index();
$(this).remove();
$("#fileBox label:eq(" + (index + 1) + ")").remove();
});
</script>
<!--选择图片上传-->
HTML部分:
<!--选择图片上传-->
<div class="form-group">
<label>
<strong style="color:#FF0000;"> </strong>执照图片:
</label>
<label class="openflag"><input type="checkbox" class="hidden" value="" />不公开</label>
<div class="file-box clearboth" id="fileBox">
<!--克隆的节点-->
<label class="clone-dom" style="display:none;"><input type="file" class="file-btn" name="img[]"/></label>
<!--克隆的节点-->
<div class="review-box"></div>
<label><input type="file" class="file-btn clone-dom" name="img[]"/></label>
</div>
</div>
CSS部分:
/******图片上传******/
#fileBox{margin:1rem 0;}
#fileBox label{display:block;float:left;height:50px;width:50px;background:url(../../img/uploadImg_bg.png) no-repeat center;}
#fileBox .file-btn{height:50px;width:50px;margin:0 .5rem .5rem 0;opacity:0;}
#fileBox .review-box{display:block;float:left;}
#fileBox .review-box img{height:50px;width:50px;margin:0 .5rem .5rem 0;}
#fileBox .prev-item{position:relative;display:inline-block;}
#fileBox .prev-item .closebtn{position:absolute;right: -1px;top: -4px;display: block;height: 14px;width: 14px;color: #fff;font-size: 16px;line-height:14px; text-align: center;background: red;border-radius: 10px;}
/******图片上传******/
天气好热,租不起空调房的孩子晚上睡觉真的是…
版权声明:本文标题:H5移动端实现仿QQ空间照片上传效果代码 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729734283a1211609.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论