使用jquery文件上传插件和自定义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';
    }

});

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

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

任何帮助都是非常受欢迎的！

Answer 1

为了在成功或错误时执行一些代码(或两者兼而有之)，jquery-文件上传提供了一些回调：

• 完成 (相当于成功)
• 失败(相当于错误)
• 总是(相当于完成)

这些回调的每个参数都与add回调的参数相同。

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