<html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/dropzone.js"></script> <style> li.dz { display: inline-block; margin:10px; background-color:#333; color:#fff; width:300px; height:300px; } </style> </head> <body> <form action="next.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="file_title"> <input type="hidden" name="file_content"> <input type="hidden" name="file_memo"> <ul> <li id="dz-title" class="dz" data-name="title"> dropzone </li> <li id="dz-content" class="dz" data-name="content"> dropzone </li> <li id="dz-memo" class="dz" data-name="memo"> dropzone </li> </ul> </form> <script> Dropzone.autoDiscover = false; $('.dz').each(function(i, elem) { $('#dz-' + $(elem).data('name')).dropzone({ url: 'up.php', paramName: $(elem).data('name'), maxFiles: 1, maxfilesexceeded: function(file) { alert('アップロードできる画像は' + this.options.maxFiles + 'つです。'); this.removeFile(file); }, dictMaxFilesExceeded: 'アップロードできる画像は{{maxFiles}}つです。', success: function(file, result) { if (result == 'error') { alert('画像のアップロードに失敗しました。'); this.removeFile(file); return; } $('input[name=file_' + $(elem).data('name') + ']').val(result); if (file.previewElement) { return file.previewElement.classList.add('dz-success'); } }, addRemoveLinks: true, dictRemoveFile: 'キャンセル', removedfile: function(file) { var thisDropzone = this; var postData = {}; $.each($(elem).data(), function(j, data) { postData[j] = data; }); $.ajax({ url: 'remove.php', type: 'post', data: postData, cache: false, complete: function() { $('input[name=file_' + $(elem).data('name') + ']').val(''); var _ref; if (file.previewElement) { if ((_ref = file.previewElement) != null) { _ref.parentNode.removeChild(file.previewElement); } } return thisDropzone._updateMaxFilesReachedClass(); }, error: function() { alert('画像の削除に失敗しました。'); } }); }, }); }); </script> </body> </html>
<?php if (!isset($_FILES) || count($_FILES) == 0) { // エラー処理 echo 'error'; exit; } // アップロード処理 $key = key($_FILES); echo $key . '_' . date('Ymd_His') . '.jpg'; /* * 配列で返したい場合は、jsonにエンコードする $result = [ 'key' => $key, 'name' => $key . '_' . date('Ymd_His') . '.jpg', ]; echo json_encode($result); */