1. 程式人生 > >利用FileReader實現多圖片上傳瀏覽重點記錄

利用FileReader實現多圖片上傳瀏覽重點記錄

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 div1=document.getElementById('picture');
                div1.appendChild(img);
                };
                

            }

限制圖片大小

  1. var fileSize = Math.round(file.size / 1024 / 1024);  
  2.                 if(fileSize >= 3) {  
  3.                     alert("請上傳小於少於3M的圖片");  
  4.                     return;
  5.                }