javascript - 入力ファイルの onChange イベントで画像を表示してみる

Question

入力ファイルのイベントで直接選択した後、画像を表示しようとしていonchangeますが、すべてのブラウザでどのように行われたかを理解していますが、取得しようとしてサファリに立ち寄りました

inputFile.valueプロパティですが、それは私に偽のパスを返します。その問題を回避しても助けてほしいのですが、ポストバックは必要ありません。

よろしく

Answer 1

入力と画像が次のようになっているとします

<img id="PreviewImage" src="" alt="?" style="height:100px;"  />
<input id="ImageFileUpload" onchange="readURL(this);" type="file" runat="server"/>

function readURL(input) {
if (input.files && input.files[0]) {//Check if input has files.
var reader = new FileReader(); //Initialize FileReader.

reader.onload = function (e) {
$('#PreviewImage').attr('src', e.target.result);
$("#PreviewImage").resizable({ aspectRatio: true, maxHeight: 300 });
};
reader.readAsDataURL(input.files[0]);
} 
else {
$('#PreviewImage').attr('src', "#");
}
}