2016-08-17 10 views
0

私はFileReaderを使用して、HTML入力を使用して選択された複数の画像をプレビューしています。readAsDataURL 404 - 画像プレビューFileReader()

Here's what I've tried so far

私はすべての詳細を記入する際、Firebugの中で、私は次のエラーを取得する、される抱えている問題は:

"NetworkError:404は見つかりません - https://www.example.com/[object%20HTMLImageElement]"

readAsDataURLを使用すると、存在しないイメージのURLを読み込もうとしているため、この問題が発生する可能性がありますが、これは問題の原因ではない可能性があります。

もう1つ私が持っていることを考慮すると、最大9枚の画像を用意する予定です。私の理解は、アップロードされた画像がbase64に変換され、画像のこの大きな文字列を使用して画像を表示することですsrc""属性。これはメモリに問題を引き起こすでしょうか?私は1MB以上の画像は受け付けませんが、使用するメモリは1画像あたり1MB以上になると思います。

お時間をありがとう

+0

こんにちは:

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

が更新フィドルを参照してください。最終目標は何ですか?プレビュー画像を表示するだけですか? メモリに関しては、9枚の画像を一時的にメモリに保存することに実際の問題はありません。 – mcranston18

+0

@ mcranston18最後の目標は、画像をテキストと一緒に(サイトに公開されたように)完全な要素として表示することです。これはすべて 'append()'ブロック内で発生します – PublicDisplayName

答えて

0

あなたが任意のDOM要素に画像を追加していないので、プレビュー画像が表示されていません。私はと呼ばれる空のdivを作成し、loadイベント中にコンテナにイメージを追加しました。 https://jsfiddle.net/d05086vs/5/

関連する問題