HTML5のFileオブジェクトを利用したファイルアップロードのコードを紹介します。 概要 こちらの記事では、JavaScriptでXMLHttpRequestとファイル選択ボックスを利用したファイルアップロードのコードを紹介しました。この記事では、HTML5で導入されたファイルオブジェクトを利用してファイルをアップロードするコードを紹介します。 プログラム コード 下記のコードを記述します。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function ExecUpload() { var u
ファイルアップロードするには？ フロント側のHTMLもしくはPHPファイルにフォームの記述をします。 <form action="" method="post" enctype="multipart/form-data"> <input type="file" value="ファイルを選択" name="image"> <input type="value" value="送信"> </form>画像を扱う場合にはenctype部分が必須になります。他にもinputタグにaccept属性を指定することにより、画像の形式をpng、jpgのみ受け付けるようにすることなどもできますが、今回は必要最低限で説明していきます。 次に画像ファイルを受け取る裏側を書いていきます。詳しくは説明しないんですが、１行目のif文で画像データが問題なく送られているかチェックします。問題がなければ４・５行目でアップロ
下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに“crossdomain.xml”という名前で保存する。（参考：Flashのドメイン間のデータロード許可） ただし、YUIのファイルを自分のサーバからロードする場合は不要。<?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="ajax.googleapis.com" /> </cross-domain-policy> 後は下記の例を参考に、アップローダーを組み込む<!-- Yahho Uploaderを読み込む --> <script type="text/javascript" src="path/to/your/yahho-uploader.js"></script> <!-- Yahho Uploader設置の
Resumable.js: Fault Tolerant Resumable File Uploads in JavaScript - Badass JavaScript ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」。 HTML5のAPIを使ってこうしたことが実現できるようになるみたいです。 ファイルが大きくなり、回線も太くなりますがブラウザベースだと落ちちゃったらまたやり直しと回線も無駄ですし、何より時間のムダですね。 こういった機能が広まれば沢山の人の無駄を減らせそうです 動作ムービーは以下に。 何年後かには当たり前になっていてそんな時代があったの？ということになるかもしれませんね githubにてソースが公開されています 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcan
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
※ 画面は公式サイトデモより Webインタフェースの欠点は数多いが、その一つがファイルアップロードに関するものだろう。複数ファイルをアップロードできない、ドラッグアンドドロップは使えないなど様々な不満点が存在する。 一括で複数ファイルをアップロードできる そんなブラウザ上の欠点を補ってくれるのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはFancyUpload、複数ファイルのアップロードを可能にするライブラリだ。 FancyUploadはJavaScriptやPHPスクリプトそしてFlashなどからなるライブラリ群で、Flashを使って複数ファイルのアップロードを行う。そして非同期的に通信を行うことでアップロードの進捗がとれるようになっている。もちろん進捗の状況連絡はPHP以外（Railsなど）でも行える。 アップロード中 JavaScriptライブラリの一つであるMoo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
