LoginSignup
9
13

More than 3 years have passed since last update.

Dropzone.jsで複数ファイルアップロード後、削除したいファイルを指定したい

Last updated at Posted at 2018-11-07

小一時間ほど調べた。
時間が勿体ないと思ったので書いておく。

index.blade.php
<script type="text/javascript">
$(function(){
  // 初期設定とか
  Dropzone.autoDiscover = false;
  Dropzone.options.myAwesomeDropzone = {
    paramName : "file",
    paralleUploads : 1,
    acceptedFiles : 'image/*',
    maxFiles: 6,
    maxFilesize: 3,
    dictFileTooBig: "ファイルが大きすぎます。(@{{filesize}}MB). 最大サイズ: @{{maxFilesize}}MB.",
    dictInvalidFileType: "画像ファイルのみアップロードが可能です。",
    dictMaxFilesExceeded: "ファイルは6ファイルまで追加が可能です。",
    dictDefaultMessage: "ここへファイルをドラッグ&ドロップするとアップロードされます。<br>最大6ファイルまでアップ可能です。<br><br>(もしくはここをクリックするとファイル選択ウインドウが表示されますのでそこで選択してもアップ可能です)"
  };

  // ここからがタイトルに書いた内容になる。
  var myDropzone = new Dropzone('div#my-dropzone', {
    url : "http://hogehoge.com/upload.php",
    addRemoveLinks: true,
    dictRemoveFile: "削除",
  }).on("success", function(file, serverResponse){
    // ファイルを受け取るphp側では、アップロードされたファイルの保存名を返すようにしておく
    // するとserverResponseにファイルの名前が返ってくる。
    console.log(serverResponse); // デバッグ用
    file.previewElement.querySelector("img").alt = serverResponse; // imgタグのalt属性にサーバから受け取ったファイル名を持たせておく
  }).on("removedfile", function(file){
    // 削除ボタンが押された時
    console.log( file.previewElement.querySelector("img").alt ); // 削除対象のファイル名が取得出来る
    $.ajax(...);//あとは非同期でファイル名を指定して削除するサーバサイドプログラムへリクエスト
  });
});
</script>
9
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
13