jquery - 在 value ajax 文件 uploader 中上传后清除文件列表

Question

我终于设法让值文件 uploader 在所有浏览器中工作。现在，一旦文件上传，它仍然会在文件输入字段下方的 li 中显示刚刚上传的文件。我需要删除此 li，因为我正在使用 ajax 提交完整的表单，该表单在提交后会重置。所以之前的文件名需要去掉。

有什么帮助吗？

        <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>

Answer 1

Fine Uploader 3.0具有重置/处置功能。当我编写它时，我并不是 100% 确定开发人员将如何使用它，因此它可能需要一些改进，但除其他外，它会清除上传文件的列表(如果您使用的是 FineUploader，而不是 FineUploaderBasic) )。

请注意，3.0 计划于 11 月 19 日发布，但如果您愿意，您现在可以构建快照版本。