使用FileReader（）從HTML表單讀取圖像

我正在嘗試爲javascript FileReader使用readAsDataURL函數，以便從HTML表單檢索數據以將其上載到數據庫中。我目前有一個來自表單的文件對象，但無法將它放入表單中放入數據庫。使用FileReader（）從HTML表單讀取圖像

HTML

input type="file" style="width: 300px" id="costumePicUpload" multiple 
button type="submit" onclick="submitForm()">SUBMIT</button

的JavaScript

function submitForm(){ 

     var file = document.getElementById("costumePicUpload").files[0]; 
    var reader = new FileReader(); 
    var img; 

    reader.onloadend = function(e) { 
    img = new Image(); 
    img.src = e.target.result; 
    if(e.target.error){ 
     alert(e.target.error.code); 
    } 
    }; 
    reader.readAsDataURL(file); 
}; 
}

當我輸出警報的鏈接它只是說不確定。有誰知道我該如何解決這個問題？

UPDATE 我能夠得到一個FileError.NOT_READABLE_ERR，但不知道什麼可能導致這種情況。

來源

2014-01-25 user3236088

multiple？你在哪裏觸發代碼？ – mplungjan

我編輯了原文。多個是在我看到的一個例子中，因爲它是一個文件數組 – user3236088

我面臨同樣的問題，這裏是代碼

HTML代碼

<input type="file" name="costumePicUpload" id="costumePicUpload" onChange="viewImage(this)" > 
<img src="#" id="imageThumb">

JavaScript函數

function viewImage(input) { 
    if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#imageThumb').attr('src', e.target.result); 
      } 
      reader.readAsDataURL(input.files[0]); 
    } 
}

當我們選擇的圖像文件進行上傳會使用文件閱讀器讀取的圖像和將其設置爲ID爲「imageThumb」的另一圖像的源。

來源

2014-01-30 09:28:18 Ravi

然後我會如何將圖像作爲參數包含在窗體中。 I.E某人選擇一張圖片來放置分類廣告。 – ChrisM

使用FileReader（）從HTML表單讀取圖像

回答

相關問題