1

i have a form and i need multiple file upload and i start with basic plugin from jQuery File Upload. However im trying to acomplish the preview thing that demo shows, and i have been reading the docs like https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine and folow the code but my preview doesnt work at all and i dont know what am i missing. My code looks like this:

<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>

now the script:

$('#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");
            });
        }            
    });
});

My Goal here is to allow user to select files and preview them in a container. When the user click on "upload-files" i want to send all files that are in the container, just like the demo.

4

1 回答 1

1

您缺乏各种数据/资源。

看看这里。

模板

脚本

意味着您需要的不仅仅是 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");
    });
}
于 2012-12-19T12:41:52.873 回答