11

ユーザーが input type="file" フィールドにアップロードしたばかりの画像を動的に表示する方法があるかどうか疑問に思っていました。

たとえば、これまでのところ、次のコードがあります。


image_upload.html

<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
    <input id ="id_iamge" type="file" name="image" />
    <input type="submit" value="Upload" />
</form>

<div id="image_view">
    <img id="uploaded_image">
</div>


upload.js

$(document).ready(function() {
    $("#id_image").change(file_select);
});

function file_select(event) {
    $("#uploaded_image").attr("src", $("#id_image").val());
}


したがって、基本的には、ユーザーがフィールドにアップロードしたばかりの画像を表示したいと考えています。

もちろん、ユーザーがフォームを送信済みで、画像が既にデータベース サーバー内にある場合は、画像を簡単に表示できることはわかっています。

ただし、画像がデータベース サーバーに送信される前に、画像をプレビューしたいと考えています。

これを行うには、アップローダー自身のコンピューターで画像の PATH を見つけて、その「ローカル パス」を画像の「src」として設定する必要があると思います。

ユーザーが送信したばかりの画像のローカル パスを取得する方法はありますか?

(上記の私の Javascript コードは、絶対パスではなく、画像ファイルの名前を「src」として設定するだけなので、明らかに機能しませんでした。たとえば、そのコードを実行して画像をアップロードすると、次のようになります。

結果：

<img id="uploaded_image" src="random_image.jpg" />

何も表示されません。

4

2 に答える 2

5

このコードを使用します。それが動作します：

<!-- Java script code, use jquery library. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
    function showimagepreview(input) 
    {
      if (input.files && input.files[0]) 
      {
        var filerdr = new FileReader();
        filerdr.onload = function(e) {
            $('#imgDisplayarea').attr('src', e.target.result);
        };
        filerdr.readAsDataURL(input.files[0]);
      }
    }
</script>

<!-- HTML -->
<form>
    <div>
        <input type="file" name="imgShow" id="imgShow" onchange="imagePreview(this)" />
    </div>
    <img id="imgDisplayarea"/>
</form>
于 2014-12-08T05:52:05.200 に答える