2

django-progressbarupload appDjango アプリに進行状況バーを追加するために使用しようとしています。しかし、それは機能していません....django-progressbarupload appテンプレートタグは正常にロードされており、ファイルはサーバーにアップロードされていますが、進行状況バーが表示されていません...コンソールにjavascriptエラーはありません...私はこのチュートリアルに従いました

誰でもプログレスバーをDjangoアプリに追加する方法を教えてもらえますか

4

3 に答える 3

2

これは明らかに Webkit ベースのブラウザーのバグです。関連するスレッドは次のとおりです。

Ajax フォーム アップロード プログレス バー

また、関連する github の問題は次のとおりです。

https://github.com/ouhouhsami/django-progressbarupload/issues/2

理解するために、webkit はファイルのアップロード中に ajax 呼び出しを行うことを許可していません。通常の回避策は、動的に作成された iframe を使用することです (上記の SO スレッドで説明されています)。

于 2013-09-11T15:52:57.960 に答える
0

アップロード URL を渡すだけですdjango_upload_url

  <!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>File Uploader</title>
      <link href="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.css" rel="stylesheet">
    </head>
    <body>
    <button data-toggle="modal" data-target="#UploaderModal"><strong>Upload Files</strong></button>
    <div class="modal" id="UploaderModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Upload Files</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
            <div id="drag-drop-area"></div>
          </div>
      </div>
    </div>
  
      <script src="https://releases.transloadit.com/uppy/v2.2.3/uppy.min.js"></script>
      <script>
        var uppy = new Uppy.Core()
          .use(Uppy.Dashboard, {
            inline: true,
            proudlyDisplayPoweredByUppy:false,
            target: '#drag-drop-area',
            showProgressDetails: true,
            width: 1000,
          })
          .use(Uppy.XHRUpload, {
              endpoint: '{% url 'django_upload_url'  %}',
              headers: {'X-CSRFToken': " {{csrf_token}} "},
              formData: true,
              fieldName: "file",
              limit:1
          })
        uppy.on('complete', (result) => {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
          location.reload();
        })
      </script>
    </body>
  </html>

プログレスバーdjangoで複数のファイルをアップロード プログレスバーDjangoで複数のファイルをアップロード

于 2021-12-16T12:31:21.170 に答える