画像をドラッグ&ドロップでアップロード
2024/01/12
■2015/04/15追記
以下記事の方が新しくて詳しい。
https://taitan916.info/blog/?p=2329
dropzoneというものを使ったらドラッグ&ドロップで
画像のアップロードができた。
■dropzone
http://www.dropzonejs.com/
■参考サイト
http://webdelog.info/2013/03/web/javascript/dropzonejs/
■ソース
・送信側
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./dropzone.js"></script>
<title>jQuery</title>
</head>
<body>
<h1>dropzone</h1>
<form action="./index.php" class="dropzone" id="my-awesome-dropzone"></form>
</body>
</html>
・受信側
<?php
define('FILE_PATH','aaa/image/'); //ファイルパスを指定
if (!is_uploaded_file( $_FILES['image1']['tmp_name'])) {
echo '<div>ファイルが選択されていません。</div>';
exit();
}
move_uploaded_file($_FILES["image1"]["tmp_name"], FILE_PATH . $_FILES["image1"]["name"]);
echo '<div>'.$_FILES["image1"]["tmp_name"], FILE_PATH . $_FILES["image1"]["name"].'をアップロードしました</div>';
?>
■その他
dropzone.js読み込んで送受信ファイル、画像保存フォルダを
作ってあげたらOK。
画像のnameとか送信先ファイルとかはdropzone.js側で設定する。
関連記事
-
-
formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法
フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...
-
-
summernoteで画像選択時にサーバにファイルをアップロードする方法
summernoteで画像を選択した際、ファイルはアップロードされずBase64 ...
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
フォームからアップロードした画像にPHPで任意のテキストを追加する方法
以前フォームから送られてきた画像に対してサイトロゴみたいなロゴ画像を追加する記事 ...
-
-
PHPでダミー画像(プレースホルダー画像)を表示する「PHP-Dummy-Image-Generator」の利用方法
先日JavaScriptでダミー画像(プレースホルダー画像)を表示する「Hold ...