Webフロントエンドの画像のプレビューをアップロード

1411 ワード

webフロントエンド javascript firefox chrome 画像のプレビュー Webフロントエンド

本人が直接測定してchrome、Firefoxの上で使うことができて、ホームページをして少し参考することができます.
HTMLコード:



  
  
  


  
  function imgLoaded() {
//      
    var image = document.getElementById("filesInput").files[0];
    var fileSize = image.size;
    if(fileSize/1024 > 1024){
        info.innerHTML = "      1M!";
        document.getElementById("imageBox").innerHTML = "";
        img.src="";
        filesInput.value = "";
    }
    else{
            var reader = new FileReader(); 
            reader.readAsDataURL(image);
            reader.onload = function(e){
            imageBox.innerHTML = "<li><img src='" + this.result + "'>"  + "</li>";
            info.innerHTML = "";
          }
        }
}
  
        chrome, firefox




  
      jpg、png、bmp

JavaScript特有の方法は、バイナリ中の1の個数のsplitを計算する方法です.