私はjquery1.8.3を使用していて、クロスブラウザーの画像プレビューを作成しようとしています。これは、IE6以降、FirefoxおよびChromeでサポートされている必要があります。特にIEは重要であり、そこから私の心の痛みが始まります。
私が使用しているhtmlは次のとおりです。
<div>
<div id="preview">
</div>
<div>
<input type="file" name="companypicture" id="companypicture" />
<a href="" class="overviewdelete">Delete</a>
</div>
</div>
私が動作させようとしているjquery:
$('#companypicture').on('change', function () {
var file = $('#companypicture').val();
var image = $('<img>').attr('src', file);
$('#preview').html(image);
});
私も試しました:
$('#companypicture').on('change', function () {
var file = $('#companypicture').val();
var html = '<img src="' + file + '" alt="" />';
$('#preview').html(html);
});
これはすべて私に壊れたリンクを与えることです。リンクが正しくないため、画像の代替テキストが表示されます。
FileReaderも試しました。FileReaderはIE10で動作しますが、6-7-8-9では動作しません。IE6以降で動作する必要があるため、解決策はありませんでした。
グーグルで答えを見つけようとしていたので、そこには何も見つからないようです。ここの誰かが私を助けてくれることを願っています。
編集:現在の提案は、ファイルをサーバーにアップロードし、そこからのリンクを使用して画像を表示し、最後にリンクを再度削除することです。