如何閱讀使用普通的JavaScript圖像文件？

我是JavaScript新手，目前我的項目有問題，其中包括查看網站根文件夾中的圖像。這是我目前的代碼：如何閱讀使用普通的JavaScript圖像文件？

var reader = new FileReader(); 

    reader.onload = function(event){ 
      var dataUri = event.target.result, 
       img = document.createElement("img"); 

       img.src = dataUri; 
       document.body.appendChild(img); 
    }; 

    reader.onerror = function(event){ 
      console.log("File could not be read: " + event.target.error.code); 
    }; 

reader.readAsDataURL("/uploads/extras/item_a/image1.png");

這是我的代碼，它不顯示任何內容。而在我的控制檯它給了我一個錯誤或Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

來源

2017-02-28 Trish Siquian

顯示在控制檯中的任何東西？ – NewToJS

'GET data：net :: ERR_INVALID_URL' @NewToJS –

試試'/ uploads/extras/item_a/image1.png'？你的文件夾結構是什麼樣的？ – 0019

這裏做

var openFile = function(file) { 
 
    var input = file.target; 
 

 
    var reader = new FileReader(); 
 
    reader.onload = function(){ 
 
     var dataURL = reader.result; 
 
     var output = document.getElementById('output'); 
 
     output.src = dataURL; 
 
    }; 
 
    reader.readAsDataURL(input.files[0]); 
 
    };

<input type='file' accept='image/*' onchange='openFile(event)'><br> 
 
<img id='output' style="height:100px; width=100px">

做一個小調查，知道哪裏是在你的代碼中的錯誤正確的方法，那就是更好學

當你放棄，只是在這裏留下評論，我會很樂意再次幫助！ :)

來源

2017-02-28 01:52:28

謝謝！但是，我不想使用''標籤。我想閱讀它manualy。 –

沒有正確的方法'output.src = URL.createObjectURL（input.files [0]）;'。但OP正試圖從一個url加載文件，而不是從文件輸入。 – Kaiido

@TrishSiquian你根本無法這樣做，這是瀏覽器的安全，將阻止你。 –

如何閱讀使用普通的JavaScript圖像文件？

回答

相關問題