Question

我有一个表单，我需要多个文件上传，我从jQuery文件上传的基本插件开始。但是，我试图完成演示显示的预览，我一直在阅读像https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine这样的文档，但是我的预览根本不起作用，我不知道我错过了什么。我的代码如下所示：

<a href="#" id="upload">upload files</a>
<input style="visibility: hidden;" id="fileupload" type="file" name="files[]" data-url="{{ asset('/bundles/testetestebundleblueimp/js/jQuery-file-upload/server/php/index.php') }}" multiple>
<input type="button" value="upload" id="upload-files"/>

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

现在的脚本：

$('#upload').live('click', function(){
        $('#fileupload').click();
        return false;       
   });

$(function () {   
    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload : false,
        uploadTemplateId: null,
        downloadTemplateId: null,
        uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<tr class="template-upload fade">' +
                '<td class="preview"><span class="fade"></span></td>' +
                '<td class="name"></td>' +
                '<td class="size"></td>' +
                (file.error ? '<td class="error" colspan="2"></td>' :
                        '<td><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></td>' +
                            '<td class="start"><button>Start</button></td>'
                ) + '<td class="cancel"><button>Cancel</button></td></tr>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            }
            rows = rows.add(row);
        });
        return rows;
    },
        done: function (e, data) {
            alert('done');
        },
        add : function(e, data) {
            $.each(data.files, function (index, file) {
                    console.log('Added file: ' + file.name);
            });            
            $("#upload-files").on("click", function() {
                   $('#progress .bar').show();                    
                   data.submit();
                   $("#upload-files").off("click");
            });
        }            
    });
});

我的目标是允许用户选择文件并在容器中预览它们。当用户点击“upload-files”时，我想发送容器中的所有文件，就像演示一样。

Answer 1

您缺乏各种数据/资源。

看看这里。

templates

scripts

意味着你需要比jsfiddle更多的东西。

现在，因为我没有将文件上传到某个位置的可能性，所以我无法进一步测试。我使用jsfiddle收到错误，但我确定您可以将自己的服务器位置上传到。

<强>更新
由于某些原因，您的data.files[index].thumbnail_url功能未设置add 我得到的唯一方法是滥用file.name属性：

add : function(e, data) {

    console.dir( arguments );

    $.each(data.files, function (index, file) {
        console.log(file, file.thumbnail_url);
        console.log('Added file: ' + file.name);
        document.body.innerHTML += '<img src="server/php/files/' + file.name + '">';
    });

    $("#upload-files").on("click", function() {
        $('#progress .bar').show();                    
        data.submit();
        $("#upload-files").off("click");
    });
}

jQuery文件上传预览所选文件

1 个答案: