0

私はhtmlのファイル入力から値を取得しようとしていて、それをすぐにdivに配置しようとしています:

HTML:

    <div class='pushLeft noOverflow' id='areaUpload'>
        <input type='file' id='uploadFileHere' />
    </div>

jQuery:

    $(document).on("change", "#uploadFileHere", function(){
        $("#areaUpload").html("<img src='" + $("#uploadFileHere").val() + "' />");

    });

私が抱えている問題は、画像が表示されないことです。ファイル パスを確認したところ、C:\fakepath\filenamehere.jpg が返されていました。

では、どうすればこの問題を解決できますか?

4

3 に答える 3

3

ファイルをサーバーにアップロードし、Web サイト内のサーバー ディレクトリに保存する必要があります。次に、イメージ タグへの相対パスまたは絶対パスを指定します。

于 2012-11-10T18:33:25.190 に答える
3

FileReaderを使用できます。これを試してください。

$(document).on("change", "#uploadFileHere", function(){
      var fileInput = this;
      if (fileInput.files && fileInput.files[0]) {
            var fileReader = new FileReader();

            fileReader.onload = function (e) {
               $("#areaUpload").html("<img src='" +e.target.result + "' />");
            }

            fileReader.readAsDataURL(fileInput.files[0]);
        }
});

このデモをチェック

この JsFiddle デモについては、@FabrícioMatté に感謝します。

古いブラウザー (IE < 10) はこの API をサポートしていないことに注意してください。

于 2012-11-10T18:40:37.603 に答える
1

サー、最初に ajax のもの (フォームの POST アクションなど) を使用し、サーバーに画像をアップロードしてから、サーバーから実際の URL を取得し、それを src 属性値に入れる必要があると思います。画像アップローダ プラグインを検索して、これらの状況でどのように機能するかを確認できます。

お役に立てば幸いです。乾杯

于 2012-11-10T18:33:39.493 に答える