H5移动端实现图片上传

转至 ：https://blog.csdn.net/qq_37610423/article/details/84319410

效果图：

我在用这个的时候发现博主少写了一些东西，导致功能无法实现，所以我改了一些东西直接复制就可以了

Html代码：

<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> 

　　

js代码：

记得引用Jquery文件！！！！！

<script type="text/javascript">

　　//一定要记得加这个

　　$(document).ready(function(){

　　　　

　　　　//获取文件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);
　　　　　　var jpeg = (fileName.indexOf(".gif") > -1) || (fileName.toLowerCase().indexOf(".gif") > -1);
　　　　　　var jpeg = (fileName.indexOf(".bmp") > -1) || (fileName.toLowerCase().indexOf(".bmp") > -1);
　　　　　　//判断文件是否是图片类型
　　　　　　if(jpg || png || jpeg || gif || bmp){
　　　　　　　　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>

　　

CSS代码：

#fileBox{
margin:/*1*/rem 0;
} 
#fileBox label{
border: 1px solid #ccc;
display:block;
float:left;
height:60px;
60px;
background:url(../img/images/images/xiang1_06.png) no-repeat center;
background-size: .19rem;
background-color: #ccc;
margin-left: .17rem;

} 
#fileBox .file-btn{
height:50px;
50px;
margin:0 .5rem .5rem 0;opacity:0;
} 
#fileBox .review-box{
display:block;
float:left;
margin-left: .17rem;
} 
#fileBox .review-box img{
height:60px;
60px;
margin:0 .1rem .2rem 0;
} 
#fileBox .prev-item{
position:relative;display:inline-block;
} 
#fileBox .prev-item .closebtn{
position:absolute;
right: -1px;
top: -4px;
display: block;
height: 14px;
 14px;
color: #fff;
font-size: 16px;
line-height:14px;
text-align: center;
background: red;
border-radius: 10px;
}
#fileBox .prev-item .closebtn {
position: absolute;
right: 7px; 
top: -4px;
display: block;
height: 14px;
 14px;
color: #fff;
font-size: 16px;
line-height: 14px;
text-align: center;
background: #8E8E93;
border-radius: 10px;
}