jQuery

Drag and drop.

2013.5.1
js

ファイルのDrag and dropが出来る、jsライブラリを実装してみた。ちなみにこれはver.2よりライブラリが不要になったよう。 サイトURL： http://www.dropzonejs.com/ github: https://github.com/component/component 使い方：

Preparation

まずはこちらから一式DL. https://github.com/enyo/dropzone/tree/master/downloads ファイル構成はこちら。 

/
css/
images/
uploads/
dropzone.js
index.php
upload.php

Let's Work with Dropzone!

css,jsファイルを読みこみ、下を記述。 

		  <form action="upload.php" class="dropzone" id="">

		  </form>

class dropzoneを与える事で起動するらしい。

Do php work

PHPの記述。upload.phpに以下を記述。 


$ds = DIRECTORY_SEPARATOR;  //1

$storeFolder = 'uploads';   //2

if (!empty($_FILES)) {
   
    $tempFile = $_FILES['file']['tmp_name'];          //3            
    
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4
   
    $targetFile =  $targetPath. $_FILES['file']['name'];  //5

    move_uploaded_file($tempFile,$targetFile); //6
   
}

上記コードの意訳。 1. DIRECTORY_SEPARATOR を$dsで定義。（しなくても大丈夫かと） 2. アップロードフォルダを指定。 3. ファイルが送信されたら、ファイルオブジェクトを$tempFileに代入。 4. フォルダへの絶対パスの作成 5. アップロード先のファイル絶対パスの指定 6. move_upload_dileでアップロード。

Options

下のスクリプトを追加することで、オプションのパラメータを渡す事が出来る。 


Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  createImageThumbnails : true,
  init: function() { // Dropzoneのinit時にイベントリスナーを追加できる
    this.on("addedfile", function(file) { console.log("Added!"); });
    this.on("drop", function(file) { console.log("Dropped!"); });
    this.on("uploadprogress", function(file) { console.log("Now on progress!"); });
    this.on("success", function(file) { console.log("success"); });
    this.on("complete", function(file) { console.log("complete"); });
  }
};

もっと詳しく知りたい方は、こちらをどうぞ。 http://www.dropzonejs.com/

BLOG TOP