1

開発中のレール サイトにフォームをセットアップし、jquery ファイル アップロード プラグインを構成しました。アップロードフォームは正常に機能します。複数のファイルを選択でき、すべての ajax アップロード機能が正常に動作します。

私が抱えている問題は、ユーザーがアップロードすることを選択したファイルを「ステージング解除」する方法を提供する必要があることです。私がプラグインをセットアップした方法では、ユーザーはファイルを選択またはドラッグ アンド ドロップできます。ファイルがフォームに追加されると、ステージング エリアに追加されます (以下を参照)。私がする必要があるのは、ユーザーが「ステージングを解除」できるようにするか、フォームからファイルを削除することです。

基本的に、jquery ファイル アップロード フォームで参照されているファイルにアクセスして削除する方法が必要です。

jqueryファイルのアップロードに付属するすべてのオプションのスクリプトなしで、基本的なjqueryファイルのアップロードプラグインを使用しています。jquery ファイルのアップロード リポジトリへのリンクは次のとおりです: https://github.com/blueimp/jQuery-File-Upload

スクリーンショット

jquery ファイル アップロード プラグインを構成する JavaScript は次のとおりです (このコードは、ドキュメント対応関数にラップされています)。

// initalize and configure the jQuery File Uploader
$('#fileupload').fileupload({
  uploadTable: $('.file-upload-list'),
  downloadTable: $('#photo'),
  dropZone: dropZone,
  sequentialUploads: true,
  autoUpload: false,
  maxFileSize:10000000,
  dataType: 'text',

  ... some code removed

  // when the user drags a file into the upload area
  drop: function (e, data) {
    $('.file-upload-table').show();
    $.each(data.files, function (index, file) {
      $('.file-upload-list').append('<li>' + file.name + '<a href="" class="close cancel"></a></li>');
});
  autoResizeColorbox();
  },

  // when the user selects a file normally
  change: function (e, data) {
    $('.file-upload-table').show();
    $.each(data.files, function (index, file) {
      $('.file-upload-list').append('<li>' + file.name + '<a href="" class="close cancel"></a></li>');
});
  autoResizeColorbox();
  },

  ... some code removed
});

どんな助けでも大歓迎です。

4

1 に答える 1