1

プロジェクトで Uploadify または Plupload のいずれかの画像アップロード ライブラリを使用する予定です。これらのライブラリのいずれかを使用したい理由は、ユーザーが一度に複数のファイルを選択して、それらを一度にアップロードできるようにするためです。

私の目標は、これらのファイル アップロード コントロールの 1 つをフォームに配置して、ユーザーが多数の画像を選択するだけでなく、他のデータを入力できるようにすることです。その後、ユーザーはフォームを送信し、入力したデータと選択した画像をサーバーにアップロードして処理できるようにする必要があります。

私が直面している問題は、これらのファイル アップロード コントロールでは、実際の aspx ページが送信される前に、ユーザーが選択したファイルをサーバーにアップロードする必要があることです。結局、これはユーザーに混乱を引き起こします。まず画像を送信してから、残りのデータとともにフォームを送信する必要があります。

私の質問は、ユーザーが実際にフォームの送信ボタンをクリックしたときにのみ、選択したファイルをサーバーに送信するように Uplodify または Plupload を作成する方法はありますか? ユーザーが最初にファイルをサーバー上の一時フォルダーにアップロードしてから、フォームを個別に送信することは望ましくありません。

これには、一時フォルダーでアップロードされたファイルを見つけて、後でフォームで送信されたデータに関連付ける必要があります。

基本的な Asp.Net FileUpload コントロールは、フォーム データの残りの部分と同時にファイルを送信できるようにすることで、目的の一部を提供しますが、明らかにユーザーが複数のファイルを選択することはできません。一度。

4

4 に答える 4

3

You could have an instance of Plupload running allow the user to select their images (Files) set the Auto upload to false.

Then when the user clicks submit you could fire an ajax call to submit the form and then fire the upload as a separate JS event once the form data has been submitted.

Does that make sense?

If you need some resources, here is an example customized UI using Plupload I built.

http://www.foliotek.com/devblog/plupload-custom-file-upload-ui/

于 2011-12-20T14:39:17.013 に答える
2

Uploadify には、このためのオプションがあります。

falseに設定してから、フォーム用に定義した送信ハンドラーをauto呼び出した場合。uploadifyUpload

于 2011-12-19T17:36:23.347 に答える
1

Plupload は非常に柔軟です。実際、人々が Plupload について言及したときに理解していることは、通常は単なる UI または jQuery ウィジェットです。しかし、そうではありません。Plupload は純粋な JavaScript API であり、独自のカスタマイズされた実装を構築するために使用できます。つまり、送信ボタンがクリックされたときにファイルをアップロードすることも可能です。実際には、Plupload バンドルに付属している例がそれを示しています ( examples/jquery/jquery_ui_widget.htmlを参照):

// Client side form validation
$('form').submit(function(e) {
    var uploader = $('#uploader').plupload('getUploader');

    // Files in queue upload them first
    if (uploader.files.length > 0) {
        // When all files are uploaded submit form
        uploader.bind('StateChanged', function() {
            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                $('form')[0].submit();
            }
        });

        uploader.start();
    } else
        alert('You must at least upload one file.');

    return false;
});
于 2011-12-25T08:12:42.530 に答える
0

下記参照。「multipart_params」にはフォームデータが含まれています。フォームをトリガーするには、plupload で通常の送信ボタンを使用します。

var uploader = jQuery("#html5_uploader").pluploadQueue({
    runtimes : 'html5,html4',
    url : '/upload/',
    max_file_size : '100mb',
    chunk_size: '1mb',
    unique_names : false,
    multipart: true,
    multipart_params: { 'start': jQuery('#start').val(), 'end': jQuery('#end').val(), 'ftype': jQuery('#ftype').val() },
    headers : {'X-Requested-With' : 'XMLHttpRequest'},
    preinit : {
        BeforeUpload: function(up, file) {
            up.settings.multipart_params = { 'start': jQuery('#start').val(), 'end': jQuery('#end').val(), 'ftype': jQuery('#ftype').val() };
        }, 
        FileUploaded: function(Up, File, Response) {

        }
    }
});
于 2012-04-29T22:43:21.167 に答える