使用Symfony2 + jQuery FileUpload处理多个文件上传

时间:2014-11-28 02:50:43

标签: javascript php jquery symfony file-upload

也许这个问题在几次之前都有问过,但我没有找到任何可以帮助我的答案。我也知道OneUpUploaderBundle的存在,但我认为我的情况不适用于这个插件(如果知道怎么做,请告诉我)。

我需要上传多个文件,但我也会有动态文件输入,您将在下面的代码中看到。所以我唯一的想法是选择构建动态文件字段中的onchange事件。这就是我现在所做的工作:

$(document).ready(function () {
    var tipoRecaudo = $('#tipoRecaudo'),
        tipo_recaudo = tipoRecaudo.val(),
        selectedIdsTipoRecaudo = [];

    tipoRecaudo.select2({
        ajax: {
            dataType: 'json',
            url: function () {
                return Routing.generate('obtenerRecaudosTramite');
            },
            data: function (tipo_recaudo) {
                return {
                    filtro: tipo_recaudo
                }
            },
            results: function (data) {
                var myResults = [];
                $.each(data.entities, function (index, item) {
                    if (selectedIdsTipoRecaudo.indexOf(item.id.toString()) === -1) {
                        myResults.push({
                            'id': item.id,
                            'text': item.nombre
                        });
                    }
                });
                return {
                    results: myResults
                };
            }
        },
        formatAjaxError: function () {
            return Translator.trans('mensajes.msgNoConexionServidor', {}, 'AppBundle');
        }
    }).change(function () {
        var id = $(this).val(),
            selectedData = tipoRecaudo.select2("data"),
            baseFilUploadHTML = '<span class="btn btn-success fileinput-button">' +
                '<i class="glyphicon glyphicon-plus"></i>' +
                '<span>Agregar archivos ...</span>' +
                '<input id="fileUpload' + selectedData.id + '" type="file" name="fileUpload' + selectedData.id + '" multiple></span>' +
                '<br><br>' +
                '<div id="progress' + selectedData.id + '" class="progress">' +
                '<div class="progress-bar progress-bar-success"></div>' +
                '</div>' +
                '<div id="fileUpload' + selectedData.id + '" class="files"></div>' +
                '<br>',
            uploadButton = $('<button/>').addClass('btn btn-primary').prop('disabled', true).text('Procesando...').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();
                });
            });

        selectedIdsTipoRecaudo.push(id);

        if (id == 1) {
            // Rif
        } else if (id == 2) {
            // Registro Mercantil
        } else {
            $('#uploadArea').append(baseFilUploadHTML);
        }

        $('#fileUpload' + selectedData.id).fileupload({
            url: url,
            dataType: 'json',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 2000000, // 2 MB
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on('fileuploadadd', function (e, data) {
            data.context = $('<div/>').appendTo('#fileUpload' + selectedData.id);
            $.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('Subir').prop('disabled', !!data.files.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress' + selectedData.id + ' .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) {
                var error = $('<span class="text-danger"/>').text('Falló la carga de archivos.');
                $(data.context.children()[index]).append('<br>').append(error);
            });
        }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
});

我相信jQuery-FileUpload通过Ajax处理文件上传,我对吗?在这种情况下,我如何处理Symfony2控制器上的文件,因为例如我需要将它们的名称和完整路径保存到表列?你怎么处理这个?将我的代码作为用例的任​​何示例?

我已经阅读了thisthisthis但是我没有那么有帮助。此外,使用Doctrine处理文件上传的官方文档,但目前还不是线索。

0 个答案:

没有答案