0

複数のパーツからなるフォームが欲しいです。

最初の部分は画像で、実際にアップロードする前に画像のプレビューを含む複数のファイルをアップロードします。

2番目の部分には、さまざまなテキストフォームフィールドがあります。

PHPとMySQLを使用して、2番目の部分が正常に構築され、機能しています。画像のアップロードも機能しています。しかし、フォームを送信する前に画像のプレビューを表示する方法がわかりません。

編集：

答えを形成するコードを使用する：

     <input type='file' onchange="readURL(this);" />
     <img id="blah" src="#" alt="your image" />

と：

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]);
        }
    }

うまく機能しますが、サムネイルは1つしか表示されません。ファイルごとに動的に画像のサムネイルを作成したい。

私はしようとしています ：

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
          var container = $('#previews');
          var image = $('<img>').attr('src', e.target.result).width(150);
          image.appendTo(container);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

と：

    <input type='file' name="files[]" onchange="readURL(this);" multiple />
    <div id="previews"></div>

これは機能しますが、入力されたファイルごとにループするにはどうすればよいですか？

4

3 に答える 3

1

それを見てください：

http://jsbin.com/uboqu3/1/edit

stackoverflowに関するこの投稿から： アップロードする前に画像をプレビューする

ルシアン

于 2013-02-09T20:34:52.057 に答える
0

HTML5キャンバスとFileReaderコンポーネントを使用してこれを行うことができます

ここでjsフィドルを見てください

于 2013-02-09T20:38:07.067 に答える
0

インターフェイスでJavaを使用する場合を除き、サーバーに画像を表示する前にプレビューを表示することはできません。

于 2013-02-09T20:31:16.610 に答える