0

アップロードされたファイルに基づいてカスタムフォームを生成する簡単なスクリプトを作成しました
。スクリプトは問題なく正常に機能します
。唯一の問題は、Jqueryによって作成されたためDOMの一部ではない作成済みファイルを送信する場合です。
私がそれを提出するとき、それは値を持っていてもnull値を送信します。
これがコードです

$(function(){

    //------------- Plupload php upload  -------------//
    // Setup html4 version
    $("#html4_uploader").pluploadQueue({
        // General settings
        runtimes : 'html4', 
        url : '../../assets/dashboard/php/upload.php',
        max_file_size : '10mb',
        max_file_count: 15, // user can add no more then 15 files at a time
        chunk_size : '5mb',
        multiple_queues : true,

        // Rename files by clicking on their titles
        rename: true,

        // Sort files
        sortable: true,
    });

    var uploader = $('#html4_uploader').pluploadQueue();
    uploader.bind('FileUploaded', function(up, file, info) {
            if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
                $('.gradient').hide();

                form    = '<form class="form-horizontal" id="mediaAdd" novalidate="novalidate" method="post">';
                length  = uploader.files.length;
                files   = uploader.files;

                for (var i = 0; i <= length-1; i++) {
                    form+= '<div class="alert alert-success" id="message" style="display:none;"></div>';
                    form+= '<div class="form-row row-fluid">';
                    form+= '<div class="nostyle">';
                    form+= '<div class="row-fluid">';
                    form+= '<label class="form-label span3" for="medianame">عنوان الملف</label>';
                    form+= '<input class="span3 text" name="mediatitle[]" type="text">';
                    form+= '<input type="hidden" name="mediapath[]" value="'+files[i].name+'" >';
                    form+= '<strong style="margin-right:20px;" >'+files[i].name+'</strong>';
                    form+= '</div>';
                    form+= '</div>';
                 }

                 form+= '<div class="form-row row-fluid">';
                 form+= '<div class="span12">';
                 form+= '<div class="row-fluid">';
                 form+= '<div class="form-actions">';
                 form+= '<div class="span3"></div>';
                 form+= '<div class="span9 controls">';
                 form+= '<button type="submit" id="submit" class="btn marginR10" style="margin:10px;" >حفظ</button>';
                 form+= '<button class="btn btn-danger">مسح</button>';
                 form+= '</div>';                  
                 form+= '</div>';
                 form+= '</div>';
                 form+= '</div>';
                 form+= '</div>';
                 form+= '</form>';
                 $('#multiform').html(form);

                 $('#mediaAdd').submit(function(){
                        $(form).ajaxSubmit({
                             type: "POST", 
                             async: false,  
                             data: $('#mediaAdd').serialize(),
                             success: function(data){
                                alert(data);
                             },
                             error: function(){alert('error');}
                        });

                        return false;
                 });
            }
        });

});

これはphpファイルからのvardumbの結果です

Array
(
    [mediatitle] => Array
        (
            [0] => 
            [1] => 
            [2] => 
            [3] => 
        )

    [mediapath] => Array
        (
            [0] => 18.jpg
            [1] => 4.jpg
            [2] => 7.jpg
            [3] => 22.jpg
        )
)

mediapath []の場合、スクリプトによって指定されているため、問題のない値がありますが、mediatitle []の場合、空の値が指定されます。

4

1 に答える 1

0

イベントのバインド方法を変更する必要があるため、ターゲットがいつDOMに追加されるかを気にする必要はありません

このようなものはうまくいきます：

var $body=$(document.body); //top parent in the dom 

$body.on("submit","#mediaAdd",function(e) {})
     .on("FileUploaded","#html4_uploader", function//...)
     //...
       ;

jqueryスコープでバインドします。関数チェーン内.off(で同じセレクターと同じイベントを使用して前に実行し、イベントが複数回トリガーされるのを回避します

于 2013-02-08T06:51:20.773 に答える