Question

我正在使用FileReader预览使用HTML输入选择的多个图像。

Here's what I've tried so far

我遇到的问题是，当我填写所有细节时，在Firebug中我收到以下错误：

“NetworkError：404 Not Found - https://www.example.com/[object%20HTMLImageElement]”

我理解使用readAsDataURL可能会导致此问题，因为它正在尝试读取不存在的图片的网址，尽管这可能不是问题的原因。

我有另外一个考虑，我计划最多有9张图像。我的理解是上传的图像转换为base64，并使用图像src""属性中的这个大字符串显示图像。这会导致内存问题吗？我接受不超过1MB的图像，但我想所使用的内存每张图像将超过1MB。

感谢您的时间

Answer 1

未显示预览图像，因为您没有将图像附加到任何DOM元素。我创建了一个名为.image-container的空div，并在load事件期间将图像附加到容器中。

app.fileReader.addEventListener('load', function(event) {
  app.imgElement.src = event.target.result;
  $('.image-container').append(app.imgElement)
});

请参阅更新的小提琴：https://jsfiddle.net/d05086vs/5/

readAsDataURL 404 - 图像预览FileReader（）

1 个答案: