1

複数のファイルをアップロードしたい。使用例: 私の Web サイトのユーザーは、複数の写真をアップロードできます。

今、私はちょうど使用しています

<input type="file" name="myfiles" multiple="multiple">

これはうまくいきますが、もっと欲しいです。ユーザーに何がアップロードされているかを示し、どのファイルがアップロードされているかをより明確にするための優れたインターフェイスが必要です。

https://github.com/blueimp/jQuery-File-Upload

したがって、この blueimp jquery ファイル アップロード スクリプトは美しい UI を備えており、まさに私が探していたものです。ただし、いくつかの問題があります。

1）ファイルがアップロードされるかどうかを決定するphpファイルにフォームを送信したいと思います。

2) 私のフォームには多くの (多くの..) 他のフィールドがあります。これをフォームの残りの部分と一緒に、昔ながらの投稿送信ボタンから送信したいと思います。これは可能ですか？

そうでない場合、誰かがより良いオプションを推奨できますか?

ありがとう！

4

1 に答える 1

0

上記のすべては、blueimp ファイル アップロード プラグインで可能です。

1) ファイルをアップロードするかどうかを決定する

プラグインのオプションを使用add:して、ファイル名を追加してサーバーに個別の ajax 呼び出しを行い、応答を使用してアップロードするファイルのリストをフィルタリングします。

2) フォームからアップロードに他のデータを追加する

プラグインのオプションを使用formData:して、送信時にサーバーに渡されるフォームに他のフィールドを追加します。

したがって、次のようなものです。

$('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        loadImageMaxFileSize: 15000000, // 15MB
        formData: $("#myForm").serializeArray()
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');

        $.ajax(
               url: "/checkfiles",
               data: { files: data.files },
               success: function(result) {
                  // assume server passes back list of accepted files
                  $.each(result.files, function (index, file) {
                    var node = $('<p/>')
                       .append($('<span/>').text(file.name));
                    if (!index) {
                      node
                        .append('<br>')
                        .append(uploadButton.clone(true).data(data));
                    }
                    node.appendTo(data.context);
                  });
               }
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append(file.error);
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
            $(data.context.children()[index])
                .wrap(link);
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var error = $('<span/>').text(file.error);
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    });
});
于 2013-05-16T23:11:02.973 に答える