1

私はフォームを持っていて、複数のファイルをアップロードする必要があり、jQuery File Upload の基本的なプラグインから始めます。ただし、デモが示すプレビューを達成しようとしています。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」をクリックすると、デモと同じように、コンテナー内にあるすべてのファイルを送信したいと思います。

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 に答える