Question

我正在构建照片上传表单并决定使用jQuery插件jquery-file-upload，但遇到了一些问题......和问题。

首先，我使用的代码（使用basic版本）：

// File upload function
jQuery(function() {

    jQuery('#pick-photos').click(function(){

        jQuery('#file-upload').click();
    });

    // Initialize the jQuery File Upload plugin
    jQuery('#photo-upload').fileupload({

        dataType: 'json',
        add: function (e, data) {

            jQuery.each(data.result.files, function (index, file) {
            jQuery('<p/>').text(file.name).appendTo(document.body);
        });

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            jQuery('#upload').click(function() {

                data.submit();
            });         
        },

        progressall: function(e, data) {

            // Calculated the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            jQuery('#upload-progress .progress-bar').css(

                'width',
                progress + '%'
           );
        },

    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {

        if (typeof bytes !== 'number') {

            return '';
        }

        if (bytes >= 1000000000) {

            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {

        return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

我遇到的问题是这行代码Uncaught TypeError: Object [object Object] has no method 'fileupload'上的错误jQuery('#photo-upload').fileupload({

其次，我想知道如何在此代码中包含自定义ajax ...以便我可以根据成功或错误更改页面内容。

任何帮助都非常接受！

Answer 1

为了在成功或错误（或两者）上执行某些代码，jquery-file-upload提供了一些回调：

done（相当于成功）
失败（相当于错误）
总是（相当于完整）

这些回调中的每一个都与add callback的回调具有相同的参数。

基本版wiki给出了一个例子：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

对于您的问题，您是否包含这些文件？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>

使用jquery-file-upload插件和自定义ajax构建照片上传器

1 个答案: