トップ  >  2016年  >  2016.02.15 [jQuery] dropzone.js
features [jQuery] dropzone.js
2016.02.15記
ドラッグ&ドロップでファイルをアップロードする jQuery のライブラリの dropzone.js を試してみました

http://www.dropzonejs.com/

ファイルアップロード
説明

HTML


<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1");
</script>
<link href="dropzone.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="dropzone.js"></script>


<script type="text/javascript">
$(function(){
  // ドロップエリア外でのドロップを無効にする
  $(document).on("drop dragover", function(e){
    e.stopPropagation();
    e.preventDefault();
  });

  // ファイルアップロード
  Dropzone.options.upload = {
    parallelUploads: 1, // 何ファイルずつアップロードするか
    acceptedFiles: "image/*,text/*", // 許可 MEME TYPE
    maxFiles: 1, // 1度にアップロードできるファイルの数
    maxFilesize: 0.5, // 1つのファイルの最大サイズ(メガ)
    autoProcessQueue: false, // 登録ボタンを押すまでアップロードをストップ
  };
  var dz = new Dropzone("div#upload",{url:"upload.php"});

  // 説明を一緒に送信
  dz.on("sending", function(file,xhr,formData) {
    var desc = $("#desc").val();
    formData.append("desc", desc);
  });

  // アップロード開始
  $("#upload_submmit").on("click", function(){
    dz.processQueue();
    return false;
  });
});
</script>



<div>ファイルアップロード</div>
<div id="upload" class="dropzone"></div>

<div>説明</div>
<textarea id="desc"></textarea>

<div>
  <input type="submit" id="upload_submmit" value="アップロード">
</div>
autoProcessQueue: false にすることで、ドロップでのアップロード開始をストップしています
アップロード先のURLの upload.php は存在しないので、このページのサンプルはエラーになります。

phpで受ける場合
$_FILE["file"] でファイルを
$_POST["desc"] で説明を受け取ります

参考:
http://plugmin.co/436/
前
2016.03.15 [CSS] 連番
カテゴリートップ
2016年
次
2016.01.15 ベストセラー+2015

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2017 keibunsya all right reserved.