个人笔记018--JQ实现多文件上传

最新推荐文章于 2024-05-06 17:09:13 发布
Dream02_05
最新推荐文章于 2024-05-06 17:09:13 发布
阅读量280
点赞数
文章标签：上传多图文件 JQ
本文链接：https://blog.csdn.net/Dream02_05/article/details/100772528
版权
这是挺久之前借鉴别人的一篇多图上传博客，经过多少改动后弄出来的，昨天跟后台同事测试刚好用到，今天再整理一下就发出来了，话不多说，直接上图片和代码：
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>多文件上传</title>
	<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
	<style>
		html,body,ul,li{
			margin: 0;
			padding: 0;
		}
		.image-div{
			padding: 30px 50px;
			border-radius: 10px;
			background-color: #fff;
			margin: 40px 30px 0;
		}
		.image-div .title{
			height: 70px;
			line-height: 70px;
			font-size: 32px;
			color: #5f5f5f;
			font-weight: 500;
		}
		.btn-submit{
			font-size: 16px;
			color: white;
			background: mediumspringgreen;
			padding: 5px 15px;
		}
		.upload-div .upload-ul,
		.show-div .show-image-ul{
			letter-spacing: -0.5em;
		}
		.upload-div .upload-ul .upload-li,
		.show-div .show-image-ul .show-image-li{
			height: 131px;
			width: 131px;
			margin-right: 22px;
			letter-spacing: normal;
			display: inline-block;
			vertical-align: top;
			margin-top: 20px;
		}
		.show-div .show-image-ul .show-image-li img{
			height: 100%;
			width: 100%;
		}
		.upload-div .upload-ul .upload-li .item{
			height: 100%;
			width: 100%;
			border-radius: 10px;
			border: 3px dashed #97def1;
			position: relative;
		}
		.upload-div .upload-ul .upload-li .item.image{
			border: none;
		}
		.upload-div .upload-ul .upload-li .item .delete-image{
			position: absolute;
			height: 25px;
			top: -12.5px;
			left: -12.5px;
		}
		.files-image{
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			border-radius: 5px;
		}
		.files-text{
			position: absolute;
			top: 40px;
			left: 0;
			width: 100%;
			text-align: center;
			color: #4c24e6;
			font-size: 18px;
			font-weight: 600;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
		}
		.upload-div .upload-ul .upload-li .item .upload-image{
			height: 100%;
			width: 100%;
			border-radius: 10px;
			vertical-align:initial;
		}
		.img-input-form{
			position: absolute;
			height: 131px;
			width: 131px;
			z-index: 999;
		}
		.img-input-form input{
			position: absolute;
			top: 0;
			left: 0;
			height: 131px;
			width: 131px;
		}
		.photo-span{
			display: inline-block;
			position: absolute;
			height: 32px;
			width: 39px;
			border-radius: 5px;
			border: 3px solid #97def1;
			left: 50%;
			top: 50%;
			margin-top: -16px;
			margin-left: -19.5px;
		}
		.circle-span{
			display: inline-block;
			position: absolute;
			height: 14px;
			width: 14px;
			border-radius: 7px;
			border: 3px solid #97def1;
			left: 50%;
			top: 50%;
			margin-top: -7px;
			margin-left: -7px;
		}
		.circle-solid-span{
			display: inline-block;
			position: absolute;
			height: 4px;
			width: 4px;
			border-radius: 2px;
			background-color: #97def1;
			left: 50%;
			top: 50%;
			margin-top: -10px;
			margin-left: 9px;
		}
		.btm-btn{
			height: 100px;
			width: 500px;
			border-radius: 50px;
			text-align: center;
			font-size: 26px;
			color: #fff;
			background-color: #ff7e00;
			margin: 40px 0px 40px 125px;
		}
	</style>
</head>

<body>
<div class="content" id="content">
	<div class="image-div" id="uploadDiv">
		<div class="title" id="imageTitle">
			上传文件（最多<span  id="fil-num">5</span>张）
			<input type="button" class="btn-submit" value="提交" onclick="fileUpload()">
		</div>
		<div class="upload-div" id="uploadImageDiv">
			<ul class="upload-ul" id="uploadUL">
				<!--默认的点击窗口 在添加了图片之后，循环在这个前面insert文件的li-->
				<li class="upload-li" id="uploadBtn" title="点击上传文件">
					<form class="img-input-form" enctype="multipart/form-data"  style="opacity: 0;">
						<input type="file" accept="*" capture="camera" multiple onchange="selectImage(this)" id="upload" >
					</form>
					<div class="item">
						<span class="photo-span"></span>
						<span class="circle-span"></span>
						<span class="circle-solid-span"></span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<script src="assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    var uploadImgIndex = 0;
	var imgArr = [];
	var num = 3;//上传文件数量
    (function (){
		$('#fil-num').text(num); 
	}())
	function checkEmpty(obj) {
		return (obj == null || obj == undefined || obj == "");
	};
	function checkNotEmpty(obj) {
		return !checkEmpty(obj);
	};
	// 选择文件时
    function selectImage(imgFile){
		var allFile = imgFile.files;
		var totalLen = allFile.length;
        if(checkNotEmpty(imgArr) && imgArr.length>0)	totalLen = totalLen + imgArr.length;
        if(totalLen > num)	return alert("只能上传" + num + "个文件");
        for(var i=0;i<allFile.length;i++){
            var file = allFile[i];
            if(checkNotEmpty(imgArr) && imgArr.length>0){
                if(imgArr.length < num) imgArr.push(file);
            }else{
                imgArr.push(file);
            }
            //判断是否为图片
            var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
            var reader = new FileReader();
            reader.readAsDataURL(file); //用文件加载器加载文件
            //文件加载完成
            reader.onload = function(e) {
                //计算最后一个窗口right边距，当时处于第num个的时候，right=0
                if((allFile.length + 1)% num == 0) document.getElementById("uploadBtn").style.marginRight = "0px";
                //以下就是将所有上传的图片回显到页面上，如果需要用canvas进行剪裁再回显以下代码就放入到canvas中，如果是其他文件则用一张默认图片替代并显示文件名
                var li = document.createElement('li');
                li.id = "upload_"+uploadImgIndex;
                document.getElementById("uploadBtn").style.display = "";
                uploadImgIndex++;
                li.className = "upload-li";
                if(rFilter.test(file.type)) {
					li.innerHTML = '<div class="item image">'+
                    '<img class="upload-image" src="'+e.target.result+'" title = "' + file.name +  '" />'+
                    '<img class="delete-image" src="assets/image/image-delete.png"/>'+
                    '</div>';
				}else{
					li.innerHTML = '<div class="item image">'+
					'<input type="file" class="upload-image" value = "' + e.target.result + '"/>'+
					'<img class="files-image" src="assets/image/file.jpg" title = "' + file.name +  '" />'+
					'<img class="delete-image" src="assets/image/image-delete.png"/>'+
					'<span class="files-text">' + file.name + '</span>'+
					'</div>';
				}
                document.getElementById("uploadUL").insertBefore(li, document.getElementById("uploadBtn"));
                var uploadArr = document.getElementById("uploadUL").querySelectorAll("li");
                var len = uploadArr.length ;
                if(len > num) document.getElementById("uploadBtn").style.display = "none";
            };
            reader.onloadend = function(e) {
                $(".delete-image").off('click');
                $(".delete-image").on('click',function(){
                    var li = $(this).parent().parent()[0];
                    var index = $(".upload-ul .upload-li").index(li);
                    var liId = li.id;
                    $("#"+liId).remove();
                    imgArr.splice(index,1);
                    document.getElementById("uploadBtn").style.display = "";
                });
            }
        }
	}
	// 文件上传
    function fileUpload(){
		if( imgArr.length < 1) return alert("请上传文件！")
		var param = new FormData();
		param.append('token','d269ed60-d1de-438b-8f6b-12c95206b284')//后台需要的参数
		param.append('id','012c2f5f-a5eb-4d22-a58b-0560f26781f6')//后台需要的参数
        //文件
		for(var i=0; i< imgArr.length;i++){
            param.append('file[' + i + ']', imgArr[i]);
		}
        $.ajax({
            url: 'http://xxxxx',//接口地址
            type: 'POST',
            data: param,
            async: false,
			cache: false,                      // 不缓存
			processData: false,                // jQuery不要去处理发送的数据
			contentType: false,                // jQuery不要去设置Content-Type请求头
            success:function(data){
				console.log(data)
				alert("上传成功")
            },
            error:function(res){
                alert("上传失败")
            }
        });
	}
</script>
</body>

</html>