- ベストアンサー
ドラッグ＆ドロップでファイルをアップロード
以下のURLを参考に、そのままファイルを設定していますが、 https://qiita.com/saoshi/items/0c2ffc26043656a4958e 動かないようです。状態はファイルを領域内にドロップしても領域に変化は無く、通常にブラウザに画像ファイルを置いた時と同じように、別ウィンドウで画像が開きます。 ---- HTML部分は以下のようにしています。js、css部分はアドレスのように参照し、リンクも問題無く開きます。 <html> <head> <title>画像をドラッグ＆ドロップで一括アップロード</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="./js/drag.js"></script> <LINK href="./css/drag.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <!-- 画像ドラッグ&ドロップ --> <div class="drop_area_multiple"> <input type="file" name="file" multiple="multiple" class="inputfile"> <div class="drop_text1">ここにファイルをまとめてドロップ</div> </div> </body> </html> ---- よろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
その Qiita の解説ページは、ブラウザ側の処理(HTML, Javascript)しか書かれていません。 ＞※サーバ側の処理は自分で実装してください…。 とあるように、そのページのスクリプトだけでは動かないのです。 ということで、サーバ側のデータ受信プログラム(PHP)を実装する必要があります。 そのページのスクリプトでは、同サーバの "/upload_image.php" というパスに、アップロードに指定したファイル内容を POST で送信しています。 ＞jQueryを使用した非同期ファイルアップロードの説明 ＞https://www.tempmail.us.com/ja/jquery/jquery%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%AE%E8%AA%AC%E6%98%8E こちらの「サーバー側での処理のためのPHP」にあるプログラムを、upload_image.php として保存して置いてみると良いかもしれません。 ただしそのままではなく、受け取ったファイルを保存するサーバ側のディレクトリを用意し、PHP内の保存先も変更。 保存ディレクトリのパーミッションも適切に設定する必要があります。 なおファイル保存ディレクトリは、Webの公開ディレクトリ以下に作ってはいけません。(セキュリティ的に) もしそんなことをすれば、ハッキングのためのPHPファイルを送り込み、http://～で実行、なんて言う事が出来てしまい、重大なセキュリティホールとなる恐れがあるからです。 まあ、上記受信PHP側では、特定の拡張子ファイルのみアップロード許可(ファイル受け入れ)することで、そのようなことが行われないように対策されてもいますが。
お礼