0

我有这个代码：

$("#uploadMe").change(function(e) {
            var input = $(this);
            var file = input[0].files[0];
            var fileName = file.name;
            var template = '<div class="j_upload_item">' +
                                    '<span class="j_label">Uploading <pre></pre></span>' +
                                    '<div class="j_upload_progress progress progress-striped active">' +
                                        '<div class="bar" style="width: 0%"></div>' +
                                    '</div>' +
                                '</div>';

            box = $("#j_upload_box").append(template);
            box.hide();
            box.fadeIn(200);
            box.find('pre').text(fileName);
            bar = box.find('.bar');

            formData = new FormData($('form')[1]);
            $.ajax({
                url: '/admin/callbacks/upload.php?type=email-attachment',  //server script to process data
                type: 'POST',
                xhr: function() {  // custom xhr
                    var myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // check if upload property exists
                        myXhr.upload.addEventListener('progress',progressHandler, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                //Ajax events
                beforeSend: beforeSendHandler,
                success: successHandler,
                error: errorHandler,
                // Form data
                data: formData,
                //Options to tell JQuery not to process data or worry about content-type
                cache: false,
                contentType: false,
                processData: false
            });

            function beforeSendHandler(e) {
                bar.css('width', '0%');
            }
            function successHandler(data) {
                data = $.parseJSON(data);

                bar.parent('div').addClass('progress-success');
                bar.css('width', '100%').delay(3000).queue(function(next) {
                    box.fadeOut(500);
                    next();
                });
                var curval = $("#j_attachments").val();
                var arr = $.makeArray(curval);
                arr.push(data.name);

                $("#j_attachments").val(arr);
            }
            function errorHandler(e) {
                console.log(e);
            }
            function progressHandler(e) {
                bar.css('width', ((e.loaded / e.total) + '%'));
            }

        });

$("uploadMe")是文件输入。该脚本应该上传文件并显示一个由template. 而不是像他们应该的那样淡出并消失的盒子，每次change触发事件时它们都会不断弹出。

所以发生的情况是，我最终得到了 3 个堆叠在一起的盒子，里面有相同的东西。

如果您需要澄清，请询问。这真的让我很烦:(

4

2 回答 2

2

试试这个：-

小提琴

        bar.css('width', '100%').delay(3000).queue(function(next) {
          box.fadeOut(500,function(){
                $(this).empty(); //empty the container.
             });
            next();
            });

问题是您j_upload_item每次都添加而不是清空容器，并且淡入在容器上，因此它只会弹出在每次文件上传期间随着时间累积的附加消息。

于 2013-05-27T22:02:49.070 回答
0

我看到你在做

box = $("#j_upload_box").append(template);

每次触发更改事件时，这都会附加一个新的 div ...也许这是您的问题？

于 2013-05-27T21:46:50.710 回答