Question

我正在尝试将readAsDataURL函数用于javascript 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);
};
}

当我在警报中输出链接时，它只是说未定义。有谁知道我怎么解决这个问题？

更新我能够得到一个FileError.NOT_READABLE_ERR，但不知道是什么原因引起的。

Answer 1

我在这里遇到的问题是代码

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为＃34; imageThumb＆＃34;的图像的来源。

使用FileReader（）从HTML表单中读取图像

1 个答案: