码迷,mamicode.com
首页 > Web开发 > 详细

上传多张照片并实现预览过程

时间:2018-08-13 12:23:07      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:必须   ntb   function   UNC   func   btn   input   i++   style   

function selectImage(imgFile){
		//上传的多张图片
		var allFiles = imgFile.files;
		var imgArr = [];
		for(var i=0;i<allFiles.length;i++){
			var file = allFiles[i];
			//添加一层过滤
	        var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
	        if(!rFilter.test(file.type)) {
	            alert("文件格式必须为图片");
	            return;
	        }
	        
	        var reader = new FileReader();
	        reader.readAsDataURL(file);
	        reader.onload = function(e){
	        	//计算最后一个窗口right边距,当时处于第4个的时候,right=0
            if((allFiles.length + 1)%4 == 0){
                document.getElementById("uploadBtn").style.marginRight = "0px";
            }
            //以下就是将所有上传的图片回显到页面上,如果需要用canvas进行剪裁再回显以下代码就放入到canvas中
            var li = document.createElement(‘li‘);
            li.className = "upload-li";
            li.innerHTML = ‘<div class="item image">‘+
                                ‘<img class="upload-image" src="‘+e.target.result+‘"/>‘+
                            ‘</div>‘;
            document.getElementById("uploadUL").insertBefore(li, document.getElementById("uploadBtn"));
	        }
		}
	}

<input type="file" multiple onchange="selectImage(this)" accept="image/gif, image/jpeg, image/png" id="upload" >
<ul id="uploadUL"></ul>

上传多张照片并实现预览过程

标签:必须   ntb   function   UNC   func   btn   input   i++   style   

原文地址:https://www.cnblogs.com/dyy-dida/p/9466912.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!