4

jQuery File Upload のWikiで提供されているサンプル コードを変更しました。スクリプトはコールバックに対しては機能しaddますが、コールバックに対しては機能しませんdone。サーバーは投稿を正しく取得し、JSON 応答を返しています。

ソース コードで、コールバックの一部がコメント アウトされていることに気付きました。それらのコメントを外す必要があるかどうかはわかりません。またはコールバックを使用しますfileuploaddoneが、コメントを削除しても機能しませんでした。

これを正しく行っているかどうかはわかりません。アップロードしたばかりの画像を説明する JSON オブジェクトをサーバーに返してもらいたいので、フォームの次のステップで画像を backbone.js モデルにリンクできます。

<form id="uploadform">
    <input id="fileupload" type="file" name="imagefile" data-url="imagefiles" multiple>
    <button type="#" class="btn btn-primary uploadfile" style="display: none">Upload</button>
    <div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>      
</form>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {              
        data.context = $('.uploadfile').css('display','none')
            utils.addValidationSuccess('Added file: ' + data.jqXHR.name);
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        add: function (e, data) {
            console.log('added');
            data.context = $('.uploadfile')
                .css('display','block')
                .click(function () {
                    utils.showAlert('Uploading','...', 'alert-warning');
                    data.submit();
                });
        }
    });
});
</script>
4

2 に答える 2

2

うまく機能したのは、送信時に jquery.ajax の明らかにネイティブなコールバックを使用し、以下に示すコードを調整したことです。

<div class="row-fluid">
    <form id="uploadform">
        <input id="fileupload" type="file" name="imagefile" data-url="imagefiles" multiple>
        <button type="#" class="btn btn-primary uploadfile" style="display: none">Upload</button>
        <div id="progress">
            <div class="bar" style="width: 0%;"></div>
        </div>      
    </form>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },
            add: function (e, data) {
                console.log('added');
                data.context = $('.uploadfile')
                    .css('display','block')
                    .click(function () {
                        utils.showAlert('Uploading','...', 'alert-warning');
                        var jqXHR = data.submit()
                            .success(function (result, textStatus, jqXHR) {
                                console.log('Done');

                                console.log('e:' + e);
                                console.log('results:' + result );
                                console.log('results.id:' + result.id );
                                console.log('textStatus:' + textStatus );               
                                console.log('jqXHR:' + jqXHR );

                                data.context = $('.uploadfile').css('display','none')
                                utils.showAlert('Success','the file uploaded successfully','alert-success');
                                // utils.addValidationSuccess('Added file: ' + data.jqXHR.name);
                            })
                            .error(function (jqXHR, textStatus, errorThrown){
                                 utils.showAlert('Error','...', 'alert-error');
                            });
                    });
            }
        });
    });
    </script>
</div>
于 2013-01-23T10:05:44.953 に答える
0

私はこのコードで同じ問題を抱えていました。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
              alert("done");
        }     
    });
});

dataType を設定しないだけで、done コールバックが実行されるようになりました...以下のコードは機能します...

$(function () {
    $('#fileupload').fileupload({
            done: function (e, data) {
                  alert("done");
        }     
    });
});

サーバーは json を返します。

于 2015-01-20T14:48:54.893 に答える