可能な重複ファイル名を選択した後、表示画像：
Preview an image before it is uploadedHTML -
を、私は、ファイルを参照して選択し
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">
を私にできるフォームを持っています。
私がやりたいことは、画像が選択された直後にその画像を表示することです。 これは、フォームの「送信」ボタンが押される前で、イメージはほぼ確実にクライアント側にあります。これはできますか？
ここに行く：
HTML
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>
スクリプト：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
私はあなたの答えを更新しましたが、完全には動作しますが、私が最初にテストしたIEです。多くのありがとう。 –
これはIEではうまくいきません！IEはFileReaderクラスを持っていません！ – Rodrigo
私のデモは私のサイト（ローカルホスト）ではなく - >画像をアップロードした後に関数（e）が呼び出されない理由は何ですか？ – user1932595
次のコードでこれを実現することができます
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});
これは動作していません。 JSFIDDLEテストサイトを実行するとファイル名をブラウズして選択できますが、何も表示されません。 IEとOperaでこれを試してみました。私は間違って何をしていますか？ –
JFiddleページの両方で、自分のページに実装しようとすると「e.originalEvent.srcElementが定義されていません」というエラーが表示されます。 e.originalEventをチェックすると、bubbles、cancelable、currentTarget、defaultPrevented、eventPhase、explicitOriginalTarget、 isTrusted、originalTarget、target、timeStamp、type、および__proto__の各プロパティがあります。アップロードされたファイル名といくつかの詳細はe.orginalEvent.originalTarget.filesで入手できますが、画像のソースを見つける場所を特定できません。 –
これは、HTML5を使用して行うことができますが、それだけをサポートするブラウザで動作します。 exampleです
これをサポートしていないブラウザでは、代わりの方法が必要です。私はthis pluginで多くの成功を収めました。これはあなたの手から多くの仕事を取り除きます。
ファイルをアップロードして移動するのは簡単です。私の問題は、有効なファイルが選択された瞬間を表示することです。私は今までに提案されていることのいずれかを得ることができませんでした。 HTML5はそれを実現しますが、ユビキタスになるまでは、そこにある多くのブラウザでうまく機能するソリューションを書く必要があります:-( –
マルチファイルのアップロードおよび遅延UPLOせずにプレビュー]を選択広告 http://anasthecoder.blogspot.in/2014/12/multi-file-select-preview-without.html – Ima
複数の画像プレビューの詳細記事http://codepedia.info/2015/06/html5-filereader -preview-image-show-thumbnail-jquery/live-demoでサーバ上でアップロードする画像 –