Dropzonejs(http://www.dropzonejs.com)を複数箇所設置して動かしていますが、この時に
アップロード済みの画像をダブルクリックしたら画像を削除するシーケンスを入れたいです。
動作デモ:https://2nd-train.net/users/submission2ndnewnotmem
(同時にIDがinsertid1になっている部分の書き換えも実施)ですが、
どのように記述すれば良いでしょうか。
jqueryの記法で以下のように記述しています。
javascriptの記法であれば、以下に書いた内容で動きます。
(この記法だとdropzoneを1箇所しか置けないのでそのまま使えない)
lang
1 myAwesomeDropzone.on(\"addedfile\", function(file) { 2 file.previewElement.addEventListener(\"dblclick\", function() { 3 4 myAwesomeDropzone.removeFile(file); 5 document.getElementById('insertid1').value=null; 6 }); 7});
以下、現状の実装です。
lang
1var myAwesomeDropzone = function() { 2 Dropzone.autoDiscover = false; 3$('.my-awesome-dropzone1').dropzone({ 4 paramName : "file", // input fileの名前// 5 parallelUploads:1, // 1度に何ファイルずつアップロードするか 6 acceptedFiles:'image/*', // 画像だけアップロードしたい場合 7 maxFiles:1, // 1度にアップロード出来るファイルの数 8 dictInvalidFileType: "画像ファイル以外です。", 9 dictMaxFilesExceeded: "一度にアップロード出来るのは1ファイルのみです。", 10 url:"/users/uploadapi2", 11 accept: function(file, done) { 12 return done(); 13 }, 14 success:function(file,xhr,formData){ 15document.getElementById('insertid1').value=xhr.res.insertid; 16 }, 17,init: function() { 18 this.on("addedfile", function(file) { 19 20 file.previewElement.addEventListener(\"dblclick\", function() { 21 console.log("削除シーケンス実行"); 22//アップロード画像をダブルクリックするとこのconsole.logまでは表示されるが、画像の削除ができない 23//this.removeFile(file); でもダメで、this.removeFile is not a functionのエラーになる。今の表記では$(...).removeFile is not a functionエラーが出る。 24 $('.my-awesome-dropzone1').removeFile(file); 25 26 27 28 }); 29 30 }); 31 32 } 33 }); 34$('.my-awesome-dropzone2').dropzone({ 35//my-awesome-dropzone1と同じ処理をやっているため省略 36 37 }); 38}
lang
1<div class="my-awesome-dropzone1 dropzone drag-and-drop-area drag-and-drop-area-out"> 2 <div class="dz-default dz-message"><span>まずは画像をドロップしてください。<br />1枚のみドロップ出来ます。<br />別の写真をアップロードし直したい時はドロップエリアに表示されている画像をダブルクリックすることで再度ドロップ出来ます。</span></div> 3</div> 4<div class="my-awesome-dropzone2 dropzone drag-and-drop-area drag-and-drop-area-out"> 5 <div class="dz-default dz-message"><span>まずは画像をドロップしてください。<br />1枚のみドロップ出来ます。<br />別の写真をアップロードし直したい時はドロップエリアに表示されている画像をダブルクリックすることで再度ドロップ出来ます。</span></div> 6</div>