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

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';
    }

});

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

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

我们将接受任何帮助！

Answer 1

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

• done（相当于成功）
• 失败（相当于错误）
• 总是（等同于完成）

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

基础版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>