前提・実現したいこと
こんにちは。
現在ドラッグアンドドロップ関連機能を実装しております。
■問題点
① DIVタグにてファイルをドラッグアンドドロップをする際に、そのファイルを(1ファイル以上)「input type file」に値を格納したいですが、現在出来てません。
■この問題があっても実装する理由
①現在はドラッグアンドドロップするイメージフィールドは一つしかないですが、今後は三つになります。
なので「input type file」を三つに分けてサーバー側で別々のオブジェクトで取得したいです。
詳しくは下記のソースコードをご参照ください。
該当のソースコード
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>Tutorial: Upload</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <style> #dragdroparea { border: 2px dotted #0B85A1; width: 500px; height: 100px; color: #92AAB0; text-align: left; vertical-align: middle; padding: 10px 10px 10 10px; margin-bottom: 10px; font-size: 200%; } </style> </head> <body> <br /> <div id="dragdroparea">ドラッグアンドドロップ</div> <br /> <input type="file" name="multipleFile" id="multipleFile" accept=".jpg" multiple /> <script> function handleFileUpload(files,obj){ var fd = new FormData(); for (var i = 0; i < files.length; i++){ fd.append('files', files[i]); } } $(document).ready(function(){ var obj = $("#dragdroparea"); obj.on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); }); obj.on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); obj.on('drop', function (e) { // ドラッグアンドドロップしたオブジェクトを <input type="file" name="multipleFile" id="multipleFile" accept=".jpg" multiple />に オブジェクトを格納したいです。 // 下記の handleFileUpload(files);これは色々試しているメッソドです(参考に出来る可能性があり、残しました。) e.preventDefault(); var files = e.originalEvent.dataTransfer.files; handleFileUpload(files); }); $(document).on('dragenter', function (e){ e.stopPropagation(); e.preventDefault(); }); $(document).on('dragover', function (e){ e.stopPropagation(); e.preventDefault(); }); $(document).on('drop', function (e){ e.stopPropagation(); e.preventDefault(); }); }); }); </script> </body> </html>
試したこと
<input type="file" name="multipleFile" id="multipleFile" accept=".jpg" multiple />を取得し、値を変える処理を試しましたが、上手くいけませんでした。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/27 04:04 編集