站内搜索:
首页 >> 前端 >> 内容
利用FileReader代码实现多图片上传浏览重点记录的方法

时间:2018/6/14 11:20:37

FileReader用Base64对文件流进行编码

var files = document.getElementById("file").files;
    if (files.length < 5) {
            for (var i = 0; i < files.length; i++) {
                /**
                 * 隐藏img控件
                 */
                var reader = new FileReader();
                reader.readAsDataURL(files[i]); 
                var ui =document.getElementById("img_identityA");
                ui.style.display="none";
                reader.onload = function(e) {  
                //添加 img
                var img = document.createElement("img");
                //设置 img 属性,如 id
                img.setAttribute("id", "newImg");
                img.setAttribute("width", "150");
                img.setAttribute("height", "150");
                //设置 img 图片地址
                img.src =  this.result;
                var p1=document.getElementById('picture');
                p1.appendChild(img);
                }; 
                

            }

限制图片大小

var fileSize = Math.round(file.size / 1024 / 1024);  
                if(fileSize >= 3) {  
                    alert("请上传小于少于3M的图片");  
                    return; 
               }  

  • 上一篇:Vue自定义指令之拖拽指令的实现及引用
  • 下一篇:moment时间过滤器简单的代码实现
  • 返回顶部