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


    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>

  • 相关阅读:
    与 字符串 相关的操作 -- lua语言实现(带有浓厚的 lua 语法特性)
    03-BFC
    11-canvas
    JavaScript知识点 思维导图
    文件系统 函数
    Meta标签大全
    PHP 快速排序
    天气预报API开发
    Zend Studio XDebug调试配置
    启程
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/9466912.html
Copyright © 2020-2023  润新知