Q&A
タイトルを変更されたようですが、can110さんの回答ではわからなかったということでしょうか？
can110さんが回答しているサイトのxhr部分がそのものずばりだと思いますがいかがですか？
前提・実現したいこと
Flaskでサーバーを立て、ドロップアンドドロップで取得したローカルファイルのタイトル情報を、htmlからpythonに送信したいです。
現在の状況、発生している問題
Flaskでサーバーを立てて、HTML上にJavaScriptで、DnDによってファイルタイトル取得するコードを書くところまではできました。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 6 <script> 7 function handleFileSelect(evt) { 8 evt.stopPropagation(); 9 evt.preventDefault(); 10 11 var files = evt.dataTransfer.files; 12 var file = files[0].name; 13 console.log(file) /*この「file」がpythonに送信したい情報です*/ 14 } 15 16 function handleDragOver(evt) { 17 evt.stopPropagation(); 18 evt.preventDefault(); 19 evt.dataTransfer.dropEffect = 'copy'; 20 } 21 22 function PageLoad(evt) { 23 var data = document.getElementById('frame'); 24 data.addEventListener('dragover', handleDragOver, false); 25 data.addEventListener('drop', handleFileSelect, false); 26 } 27 </script> 28 29</head> 30<body onload="PageLoad();"> 31 <!--実際にドロップアンドドロップする場所--> 32 <div id="frame" style="background-color:#b8deff;border:solid 1px #3470ff; width:720px; height:360px;">ここにファイルをドロップしてください。</div> 33 34</body> 35</html> 36
ですが、その取得した文字列をpythonに送信する方法がわかりません。
入力フォームといったinputやtextareaを使い、submitでpythonに送信するという場合は出来るのですが、今回のようなDnDでは送信ボタンを作らないので、pythonに情報送ることが、自分ではできないというのが現在の状況です。
したいこと
具体的にはソースコード13行目の、現在はconsole.logとなっている「file」という情報をpythonに送信したいです。
送信ボタンを押して送信といった形ではなく、DnDしたら即座にpython側に情報を渡したいです。
試したこと
どうにか現状でも自分のできる形にもっていけないかとコードをこねくり回したのですが駄目でした。
調べたり、検索は可能な限りさせていただきました。
ただ、自分の検索方法が悪いのか、あまりに初歩的すぎるのか、回答や類似例に出会うことが出来ませんでした。
どうかお力をおかしくださいm(_ _)m
補足情報（FW/ツールのバージョンなど）
Python 3.8
回答1件
0
内容確認していませんので、参考まで。
Drag and Drop and Automatically Send to the Server
デモサイト
投稿2020/01/23 10:31
総合スコア38262
あなたの回答
tips
プレビュー
