上傳之前在移動瀏覽器上預覽圖像時出現的問題，在桌面瀏覽器上正常工作

問題定義：
我想從手機圖庫中選擇多個圖像並上傳。但在上傳之前，只要用戶選擇圖像，我想要顯示所選圖像的預覽。爲了達到這個目的，我使用了下面的代碼片段，它可以在桌面瀏覽器上完美工作。但是，當使用移動瀏覽器嘗試相同時，它不顯示圖像的預覽。
我試着通過執行下面的代碼作爲html文件以及w3schools.com提供的「自己試用」編輯器。在這兩種情況下，如果我正在使用桌面瀏覽器進行操作，但它在我使用移動瀏覽器時不顯示圖像的預覽效果會很好。
W3shcools編輯：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
我使用谷歌瀏覽器的以下版本。
桌面：27.0.1453.94米
手機：27.0.1453.90
手機型號：三星Galaxy S2

感謝您在這方面的任何幫助。
上傳之前在移動瀏覽器上預覽圖像時出現的問題，在桌面瀏覽器上正常工作

<!DOCTYPE html> 
<html> 
<head> 
    <title>File API - FileReader as Data URL</title> 
</head> 
<body> 
    <header> 
     <h1>File API - FileReader</h1> 
    </header> 
    <article> 
     <label for="files">Select multiple files: </label> 
     <input id="files" type="file" accept="image/*" multiple/> 
     <output id="result" /> 
    </article> 
</body> 

<script> 
window.onload = function(){  
    //Check File API support 
    if(window.File && window.FileList && window.FileReader) 
    { 
     var filesInput = document.getElementById("files"); 

     filesInput.addEventListener("change", function(event){ 

      var files = event.target.files; //FileList object 
      //console.log(files); 
      var output = document.getElementById("result"); 
      //console.log(result); 
      for(var i = 0; i< files.length; i++) 
      { 
       var file = files[i]; 

       //Only pics will be allowed 
       if(!file.type.match('image')) 
        continue; 

       var picReader = new FileReader(); 

       picReader.addEventListener("load",function(event){ 

        var picFile = event.target; 
        console.log(event); 
        var div = document.createElement("div"); 

        div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + 
          "title='" + picFile.name +"' width='80' height='80'/>"; 
        console.log(div.innerHTML);     
        output.insertBefore(div,null);    

       }); 

       //Read the image 
       picReader.readAsDataURL(file); 
      }        

     }); 
    } 
    else 
    { 
     console.log("Your browser does not support File API"); 
    } 
} 
</script> 
</html>

來源

2013-07-10 Anup

控制檯中是否有錯誤信息？如果您使用調試器完成它，會發生什麼情況？ – RoToRa

我沒有檢查控制檯。但是，而不是console.log（價值），我試着警報（價值）。設備瀏覽器上沒有顯示警報。在桌面瀏覽器上，警報框顯示值。 – Anup

你把警報放在哪裏？ – RoToRa

修改了另一個代碼片段，它可以在瀏覽器上正常工作。我修改的代碼片段在下面的鏈接中提到。
Preview an image before it is uploaded

下面是可在桌面瀏覽器和移動瀏覽器上正常工作的代碼段。

<!DOCTYPE html> 
<html> 
<head> 
    <title>File API- FileReader as Data URL</title> 
</head> 
<body> 
    <input type='file' id="imgInp" /> 
    <img id="myImage" src="#" alt="your image" /> 
</body> 

<script> 
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      document.getElementById('myImage').src=e.target.result; 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 
document.getElementById('imgInp').addEventListener("change",(function(e){ 
    readURL(this); 
})); 
</script> 
</html>

來源

2013-07-11 12:08:49 Anup

上傳之前在移動瀏覽器上預覽圖像時出現的問題，在桌面瀏覽器上正常工作

回答

相關問題