勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

画像をドラッグ&ドロップでアップロード

      2015/04/15

■2015/04/15追記

以下記事の方が新しくて詳しい。

http://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側で設定する。

 - javascript, jQuery, 画像

  関連記事

jquery_logo
スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...

jquery_logo
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

javascript_logo_unofficial-300x300
getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

images
PHPで縦横どちらかが指定の長さを超えた場合、比率を保ったままリサイズ

PHPで縦横どちらかが指定の長さを超えた場合、 比率を保ったままリサイズしたかっ ...

other
画像拡張子の違いについて

jpg/gif/png画像についてGIFはアニメーションが出来る、 ぐらいの知識 ...

javascript_logo_unofficial-300x300
javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

javascript_logo_unofficial-300x300
javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

jquery_logo
jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

jquery_logo
jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jquery_logo
jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...