jquery fileupload语法错误类型错误

时间:2013-01-21 13:21:18

标签: jquery-file-upload

使用this(jquery for fileupload)脚本我收到一些错误,但是它在本地的wamp中工作。对于生产,我需要停止此警报错误“

  

属性列表后的“SyntaxError:missing}”    progressall:function(e,data){“

或在Chrome中:

  

“第211行未被捕获的语法错误标识符”

与firefox中的行相同。

有人有想法吗?

 $(function () {
     $('#fileupload').fileupload({
        dataType: 'json',       
        done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
     );
    }
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    }
    done: function (e, data) {
        data.context.text('Upload finished.');
    }
    add: function (e, data) {
        data.context = $('<button/>').text('Upload')
            .appendTo(document.body)
            .click(function () {
                $(this).replaceWith($('<p/>').text('Uploading...'));
                data.submit();
            });
    }
    done: function (e, data) {
        data.context.text('Upload finished.');
    }

     });
});

我做了一些修改: 在mozilla中没有错误但没有工作

在chrome错误中(Uncaught TypeError:无法调用未定义的'push'方法)并且无法正常工作

$(function () {
    //declare a "updloadOptions" variable object that will be passed to the plugin constructor method as a parameter. (You can give any name to this object.)
    var updloadOptions = {};

    //set the datatype property to 'json'.
    updloadOptions.dataType = 'json';
    //declare the "done" callback method on "updloadOptions" object.
    updloadOptions.done = function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    };
    //declare the "progressall" callback method on "updloadOptions" object.
    updloadOptions.progressall = function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
        progress + '%');
    };
    //declare the "add" callback method on "updloadOptions" object.
    updloadOptions.add = function (e, data) {
         data.context = $('<button/>').text('Upload')
         .appendTo(document.body)
         .click(function () {             $(this).replaceWith($('<p/>').text('Uploading...'));                
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
        });
    };
    //initialize the component
    $('#fileupload').fileupload(updloadOptions);
});

带有语法错误的正确脚本

  

属性列表后的SyntaxError:missing}   filesContainer:$('。filescontainer')

我不需要filesContainer,因为我检索了第二个带有uploadsystem的jquery选项卡

$(function () {
$('#fileupload').fileupload({
   dataType: 'json',       
   done: function (e, data) {
       $.each(data.result.files, function (index, file) {
           $('<p/>').text(file.name).appendTo(document.body);
       });
   },
   progressall: function (e, data) {
   var progress = parseInt(data.loaded / data.total * 100, 10);
   $('#progress .bar').css(
       'width',
       progress + '%'
    );
   },
   add: function (e, data) {
       data.context = $('<p/>').text('Uploading...').appendTo(document.body);
       data.submit();
   },
   done: function (e, data) {
       data.context.text('Upload finished.')
   },
   add: function (e, data) {
       data.context = $('<button/>').text('Upload')
           .appendTo(document.body)
           .click(function () {
               $(this).replaceWith($('<p/>').text('Uploading...'));
               data.submit();
           });
   },  done: function (e, data) {
       data.context.text('Upload finished.')
   }
   filesContainer: $('.filescontainer') 

});
});

1 个答案:

答案 0 :(得分:2)

您的脚本存在基本错误,会产生多个错误。

  • 您应该在传递给.fileupload()插件的选项对象的每个成员的末尾添加逗号。
  • 您声明了重复的回调方法。 done回调被声明3次,add回调被声明两次。

因此,您应该只使用每个重复减速中的一个,或者将这些重复中的代码合并为一个。但我发现这些回调中的代码也是重复的。

以下是代码的清理版本:

<script type="text/javascript">
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css('width', progress + '%');
            },
            add: function (e, data) {
                data.context = $('<p/>').text('Uploading...').appendTo(document.body);
                data.submit();
            }
        });
    });
</script>

这是一个更易阅读的版本:

<script type="text/javascript">

    $(function () {

        //declare a "updloadOptions" variable object that will be passed to the plugin constructor method as a parameter. (You can give any name to this object.)
        var updloadOptions = {};

        //set the datatype property to 'json'.
        updloadOptions.dataType = 'json';

        //declare the "done" callback method on "updloadOptions" object.
        updloadOptions.done = function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        };

        //declare the "progressall" callback method on "updloadOptions" object.
        updloadOptions.progressall = function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
        };

        //declare the "add" callback method on "updloadOptions" object.
        updloadOptions.add = function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        };

        //initialize the component
        $('#fileupload').fileupload(updloadOptions);

    });

</script>