0

ユーザーが画像を選択できるボタンがあります-以下に示します：

        <div id="fileUpload">
          <form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data">
            <input type="file" id="file"/>
          </form>
          <div id="fakefile">
            <img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo">
            <span id="usePhoto">BROWSE</span>
          </div>
        </div>

次に、画像をサーバーにアップロードし、ページを更新せずに同じページに画像を表示する必要があります。私は次のことを試しました：

$('input#file').change(function() {
  $('form#joinPhotoUploadForm').submit();
});

ページを更新せずに画像をアップロードして同じページに表示する方法についてアドバイスはありますか？

どうも

4

3 に答える 3

1

最新のブラウザで利用可能なFileReaderとFileAPIを使用して、アップロードする前にファイルクライアント側を読み取り、プレビューを表示して、プレビューを確認した後にユーザーがアップロードできるようにすることができます。従来のファイル選択入力の代わりに、デスクトップからブラウザへの画像を使用したドラッグアンドドロップを実装することもできます。

これがそのチュートリアルです：http ：//www.html5rocks.com/en/tutorials/file/dndfiles/

古いブラウザでは、ページをリロードして従来のファイル入力にフォールバックできます。

于 2012-09-08T00:31:35.137 に答える
0

UploadifyやPuploadのような派手なアップローダーを検討しましたか？

于 2012-09-08T00:27:58.633 に答える
0

このチュートリアルで提供されているソリューションを試すことができ ますhttp://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp

于 2012-09-08T00:34:34.753 に答える