温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » HTML5 » jquery php ドラッグ&ドロップで画像アップローダ

— 広告 —


— 広告 —

jquery php ドラッグ&ドロップで画像アップローダ

所要時間 約 2分

jquery+php でドラッグ&ドロップで画像アップローダを作る。

と思ったらすでに沢山あります...。 

今日は、ネタ集め。

yokano/dnd_file_upload

$ git clone https://github.com/yokano/dnd_file_upload ./

インストールしたディレクトリの下にアップロードしたファイルを置くためのディレクトリ images を作る。
パーミッションは 777 にする。

upload.php をモディファイする。

<?php
 
if(is_uploaded_file($_FILES['file']['tmp_name'])) {
        move_uploaded_file($_FILES['file']['tmp_name'], './images' . $_FILES['file']['name']);
}
 
?>

* localhost/dnd/index.html でテスト。

FormDataオブジェクト、 Drag and drop を調べる。

アップロードしている時に表示するプログレスバーは nprogress.js、nprogress.css を使う。

・HTML5 Drag and drop (DnD)
 実装に必要なイベントは7つあるイベントのうち3つだけ。

  1. dragstart :ドラッグが開始された時に発生
  2. dragover :ドロップ領域に日っている間連続して発生
  3. drop :ドロップされた時に発生

HTML5 Drag and dropを実装してみよう から

参考URL
Ajaxでドラッグ&ドロップで複数ファイル対応で進捗つきのアップロード

jQuery + ajax で ファイルアップロードするには

HTML5のコンテンツにファイルをドラッグ&ドロップでアップロードする

HTML5でファイルをドラッグして読み込むやつ

HTML5 Drag and dropを実装してみよう

-- 広告 -- -- 広告 --

 

  HTML5 

この記事に関連する記事一覧

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。