web-dev-qa-db-ja.com

jQuery FileUploadが「完了」をトリガーしない

jQuery-File-Upload プラグインを使用しています。私はそれをテストするための簡単なコードを書きました-そしてそれは機能しますが、問題がないわけではありません。ファイルがアップロードされて進行状況バーが最後に達しても、doneはトリガーされません。

これがコードです：

$('#file_file').fileupload({
    dataType: 'json',
    autoUpload: true,
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        alert('Done');
    }
});

私の入力はそれと同じくらい簡単です：

<input type="file" id="file_file" name="file[file]" />
jqueryjquery-file-uploadblueimp
21
Tomek Buszewski

いくつか変更しましたが、うまくいきました。ここに：

$('#file_file').fileupload({
    autoUpload: true,
    add: function (e, data) {
        $('body').append('<p class="upl">Uploading...</p>')
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        $('.upl').remove();
        $.each(data.files, function (index, file) {
            /**/
        });
    }
});
10
Tomek Buszewski

サーバーがJSONを返さない場合は、削除してみてください：

dataType: 'json'

そうしないと、テストが簡単な失敗イベントが発生する可能性があります。

fail: function(e, data) {
  alert('Fail!');
}
30
bradw2k

autoUpload：trueで修復しました。autoUploadプロパティが設定されていない場合（アップロードが期待どおりに機能している場合でも）、doneイベントはトリガーされません。

6
Juanmi Taboada

今日実験しました！ PHPを使用している場合は、uploadhanler PHPファイルにエラーや警告が表示されないことを確認してください。不適切なJSON出力が作成され、ファイルがアップロードされると、プラグインは、完了したイベントで正しいJSONバッファを送信できません。

PHP=ファイルのエラーを追跡するには、そのようなスクリプトでエラーを表示するのではなく、ログファイルを作成することをお勧めします。以下を使用できます。

error_reporting(0)

ただし、ログファイルにエラー追跡を追加するには、DO NOT FORGETを使用します。もちろん ！

1
YlianEstevez

ドキュメントで説明されているように このコールバックオプション を試してください。

$('#fileupload').bind('fileuploaddone', function (e, data) {
    alert('Done');
});

それは確かに私のために働きます。

1
Waqleh

私はmulter、multer-Azure-storage、およびblueimp-file-uploadを使用しています。すべてunpkg.comから提供されます。以下は、doneトリガーを使用した複数ファイルのアップロードです。 2017年10月22日現在機能しています。

jsファイル：

  <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/js/vendor/jquery.ui.widget.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.iframe-transport.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.fileupload.js"></script>

expressから提供されるページHTML：

      $('#fileupload').fileupload({
          url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery',
          paramName: '_file',
          dataType: 'json',
          type: 'POST',
          autoUpload: true,
          add: function (e, data) {
              console.log('uploading:', data)
              data.submit();
          },
          done: function (e, data) {
              console.log('done triggered');
              console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url);
              $.each(data.files, function (index, file) {
                // console.log(file.name, 'uploaded.')
                // console.log('done');
                // console.log(index);
                // console.log(file);
              });
              console.log(data);
          }
      });

// GET/my-listings/edit/[プロパティID]/gallery

app.get(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    (req, res) => {
        console.log('image gallery:', req.params._id);
        res.render('my-listings--edit--gallery', {
            _id: req.params._id,
            session: req.session
        });
    }
);

// POST/my-listings/edit/[property id]/gallery

 app.post(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    upload.array('_file'),
    (req, res, next) => {
        console.log(req.files);
        res.setHeader('Content-Type', 'application/json');
        res.send({result: req.files});
        next();
    }
);
0
xemasiv