画像をドラッグ&ドロップでアップロード
■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側で設定する。
関連記事
-
-
jQueryのappendとprepend
よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...
-
-
jQueryでimgタグのsrcを変える
やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...
-
-
PHPでもキャッシュで画像が表示されない
ここみたいにキャッシュの影響と考えられるケースが発生した。 結果的にキャッシュっ ...
-
-
他サイトのRSS情報を画像付きで表示させる
WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...
-
-
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
-
-
imgタグとPHPでグラフ作成
プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...
-
-
プラグインを使用せず、jQueryでオートページャー
プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...
-
-
chardin.jsを利用して注釈を入れる
簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...
-
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
- PREV
- PHPで月末日を取得
- NEXT
- 外部ファイル変更時の注意