使用blueImp上传jquery - 成功函数

时间:2014-09-08 11:43:33

标签: jquery jquery-file-upload

我正在使用blueImp jquery文件上传插件,基于" Basic Plus"演示版。我已从输入标记中删除了multiple字,因此只能上传单个文件(该图像适用于用户的配置文件图像)。

以下是我所拥有的jquery - 再次,sample file中的确切内容,除了(a)删除了multiple属性,以及(b)用于上传的目标url改变了。

我遇到麻烦,就是成功功能。当文件(成功!)上传时 - 没有任何反应。即 - 中止'按钮只是保持不变,没有其他事情发生。

- >所以我的问题是(1)我的上传功能需要返回什么,以便现有的脚本可以提供某种用户反馈/成功消息; 或者(2)在下面的脚本中需要进行哪些修改,以便各种消息可以告诉用户上传成功了?

我真正想要的是因为它用于配置文件图像 - 用户可以决定再次更改图像(重新上传)。

我现在回来的是以下JSON:

[{"name":"08.09.2014_15.48.47_7IhYm.jpg","size":52170,"url":"\\uploads\/08.09.2014_15.48.47_7IhYm.jpg","thumbnail_url":"\\uploads\/08.09.2014_15.48.47_7IhYm.jpg","delete_url":"upload2.asp?islem=delete&id=9","delete_type":"POST"}]

现有的jQuery代码:

        $(function () {
            'use strict';
            // Change this to the location of your server-side upload handler:
            var url = 'ULfile2.asp',
                uploadButton = $('<button/>')
                    .addClass('btn btn-primary')
                    .prop('disabled', true)
                    .text('Processing...')
                    .on('click', function () {
                        var $this = $(this),
                            data = $this.data();
                        $this
                            .off('click')
                            .text('Abort')
                            .on('click', function () {
                                $this.remove();
                                data.abort();
                            });
                        data.submit().always(function () {
                            $this.remove();
                        });
                    });
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                autoUpload: false,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                maxFileSize: 5000000, // 5 MB
                // Enable image resizing, except for Android and Opera,
                // which actually support image resizing, but fail to
                // send Blob objects via XHR requests:
                disableImageResize: /Android(?!.*Chrome)|Opera/
                    .test(window.navigator.userAgent),
                previewMaxWidth: 100,
                previewMaxHeight: 100,
                previewCrop: true
            }).on('fileuploadadd', function (e, data) {
                data.context = $('<div/>').appendTo('#files');
                $.each(data.files, function (index, file) {
                    var node = $('<p/>')
                            .append($('<span/>').text(file.name));
                    if (!index) {
                        node
                            .append('<br>')
                            .append(uploadButton.clone(true).data(data));
                    }
                    node.appendTo(data.context);
                });
            }).on('fileuploadprocessalways', function (e, data) {
                var index = data.index,
                    file = data.files[index],
                    node = $(data.context.children()[index]);
                if (file.preview) {
                    node
                        .prepend('<br>')
                        .prepend(file.preview);
                }
                if (file.error) {
                    node
                        .append('<br>')
                        .append($('<span class="text-danger"/>').text(file.error));
                }
                if (index + 1 === data.files.length) {
                    data.context.find('button')
                        .text('Upload')
                        .prop('disabled', !!data.files.error);
                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }).on('fileuploaddone', function (e, data) {
                $.each(data.result.files, function (index, file) {
                    if (file.url) {
                        var link = $('<a>')
                            .attr('target', '_blank')
                            .prop('href', file.url);
                        $(data.context.children()[index])
                            .wrap(link);
                    } else if (file.error) {
                        var error = $('<span class="text-danger"/>').text(file.error);
                        $(data.context.children()[index])
                            .append('<br>')
                            .append(error);
                    }
                });
            }).on('fileuploadfail', function (e, data) {
                $.each(data.files, function (index, file) {
                    var error = $('<span class="text-danger"/>').text('File upload failed.');
                    $(data.context.children()[index])
                        .append('<br>')
                        .append(error);
                });
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');
        });

0 个答案:

没有答案