2

私はついに、すべてのブラウザーでvalumsファイルアップローダーを動作させることができました。これで、ファイルがアップロードされると、ファイル入力フィールドのすぐ下のliにアップロードされたばかりのファイルが表示されます。送信後にリセットされるajaxを含む完全なフォームを送信しているので、このliを削除する必要があります。したがって、以前のファイル名を削除する必要があります。

何か助けはありますか？

        <script type="text/javascript">

    var ID="";
    $(document).ready(function(e) {
         var uploader = new qq.FileUploader({
         element: document.getElementById('fine-uploader'),
         debug:true,
         action: '<?PHP echo base_url();?>index.php/teacher/addBook',
         allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
         autoUpload:false,
         multiple:false,
                 template: '<div style="margin-left:0px !important; margin-top:10px" class="qq-uploader span3">' +
              '<pre class="qq-upload-drop-area span12"><span>{dragText}</span></pre>' +
              '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
              '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center; width:280px"></ul>' +
              '</div>',
        uploadButtonText: '<i class="icon-upload icon-white"></i> Upload Book Cover',
        onComplete:function(id,fileName,responseJSON){
            ID=responseJSON.id;
            },

        classes: {
            button: 'qq-upload-button',
            drop: 'qq-upload-drop-area',
            dropActive: 'qq-upload-drop-area-active',
            dropDisabled: 'qq-upload-drop-area-disabled',
            list: 'qq-upload-list',
            progressBar: 'qq-progress-bar',
            file: 'qq-upload-file',
            spinner: 'qq-upload-spinner',
            finished: 'qq-upload-finished',
            size: 'qq-upload-size',
            cancel: 'qq-upload-cancel',
            failText: 'qq-upload-failed-text',
            success: 'alert alert-success',
            fail: 'alert alert-error',
            successIcon: null,
            failIcon: null
        }

    });

    $("#add_book").click(function(){


            ready=true;
            if($("#name").val()=="")
            {
                $("#name").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
            }

            if($("#author").val()=="")
            {
                $("#author").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
            }

            if($("#isbn").val()=="")
            {
                $("#isbn").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
            }

            if($("#subject").val()=="")
            {
                $("#subject").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
            }
            if($("#ageGroup").val()=="")
            {
                $("#ageGroup").css('background-color','#FFF2F2').css('border-color','red'); ready=false;
            }
            if(ready)
            {
                uploader.setParams({name:$("#name").val(),author:$("#author").val(),isbn:$("#isbn").val(),subject:$("#subject").val(),age:$("#ageGroup").val()});
                uploader.uploadStoredFiles();
                $("#name").val("");
                $("#author").val("");
                $("#isbn").val("");
                $("#subject").val("");
                $("#ageGroup").val("")                      
            }


        });



    });
        </script>
            <div class="page">
           <div class="menu"><a href="#">Books</a> &nbsp;| &nbsp;<a href="#" class="active">Students</a></div>
                <h2>Add New Book</h2>
                                 <div class="send-form" id="book_form" >   

                          <p style="float:left">
                          <label>Book Title:</label>
                          <input class="u-3" name="name" id="name" />
                          </p>

                          <p style="float:right">
                          <label>Book Author</label>
                          <input class="u-3" name="author" id="author" />
                          </p>
                          <p style="float:left">
                          <label>Book ISBN</label>
                          <input class="u-3" name="isbn" id="isbn" />
                          </p>


                          <p style="float:right">
                          <label>Subject</label>
                          <input class="u-3" name="subject" id="subject" />
                          </p>

                           <p style="float:left">

                          <div id="fine-uploader" style="margin-left:0px !important">

                          </div>
                          </p> 
                          <p style="float:right; width:250px; margin-top:10px; margin-right:-10px">
                          <label>Age group (eg. 8-12)</label>
                          <input class="u-3" name="ageGroup" id="ageGroup" />

                          </p>
4

3 に答える 3

0

Fine Uploader 3.0 には、リセット/破棄機能があります。私がそれを書いたとき、私は開発者がそれをどのように使用するかについて 100% 確信が持てなかったので、何らかの改善を使用する可能性がありますが、とりわけ、アップロードされたファイルのリストをクリアします (FineUploaderBasic ではなく、FineUploader を使用している場合)。 ）。

3.0 は 11 月 19 日にリリースされる予定ですが、必要に応じて今すぐスナップショット バージョンをビルドできます。

于 2012-11-16T14:37:53.973 に答える
0

以下を含める必要があります。

 fnOnAdding: function(data)
    {   
      $('#fine-uploader').reset();
      return true;  
    },

しかし、私の場合、編集可能なデータテーブルを使用すると、FileUploader 関連のオブジェクトのみをリセットすることを期待していましたが、テーブル全体がリセットされます。それに加えて、それは機能します。

于 2012-11-23T11:39:57.630 に答える