勉強したことのメモ

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

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

      2015/04/15

■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側で設定する。

 - JavaScript, jQuery, 画像

  関連記事

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...

Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

safariのみスクロール関連のイベントが発火しない

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

JavaScriptで配列をループ処理(for-in)

JavaScriptでforeach使ったこと無かったけど、 配列のキーが連番じ ...

Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

PHP側での画像最大アップロードサイズの確認

画像がアップロードできず、恐らくサイズ指定にひっかかっているので 最大サイズを調 ...

GoogleMapAPIでジオコーディングできない

住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...