HTML5のFileオブジェクトを利用したファイルアップロード (JavaScript プログラミング)
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
ファイルアップロードをドラッグ&ドロップでも可能にする - webプロダクトいんふぉ
ファイルアップロードするには？ フロント側の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文で画像データが問題なく送られているかチェックします。問題がなければ４・５行目でアップロ
アップロードの進捗状況が分かるプログレスバー付きのJavaScript製ファイルアップローダー - Yahho Uploader [ゼロと無限の間に]
下記の内容の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設置の
HTML5 – ファイルアップロード プログレスバー付 « Weblog it-azusa
XPのサポート終了をきっかけに、ブラウザも一斉にＩＥ11が主流になるという大変な変化が起こっています。ＩＥ11はWindows8のタッチパネル用のタッチイベントという独自の規格を装備していて、マウス操作がうまく動かないという現象が起きていました。その修正をしていたついでに、これが主流になるなら、HTML5とAjaxを使用した、複数ファイルアップロードを作ることにしました。jQueryを使用しない自前のAjaxでできてるので、jQueryのバージョンアップやIE対応を待つ必要がなく、自分で拡張したり、応用することができます。プログレスバーはその応用で作りました。ちなみに、jQueryで全て作っている人は、前述のＩＥ11のタッチイベントの問題は、自力では解決できません。 複数ファイルの選択ができますか？お手持ちのブラウザで試してください。 対応のブラウザ モダンブラウザのie11、chrome
ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」:phpspot開発日誌
Resumable.js: Fault Tolerant Resumable File Uploads in JavaScript - Badass JavaScript ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」。 HTML5のAPIを使ってこうしたことが実現できるようになるみたいです。 ファイルが大きくなり、回線も太くなりますがブラウザベースだと落ちちゃったらまたやり直しと回線も無駄ですし、何より時間のムダですね。 こういった機能が広まれば沢山の人の無駄を減らせそうです 動作ムービーは以下に。 何年後かには当たり前になっていてそんな時代があったの？ということになるかもしれませんね githubにてソースが公開されています 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcan
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
MOONGIFT: » 進捗も分かる、複数ファイルのアップロードを可能にするライブラリ「FancyUpload」:オープンソースを毎日紹介
※ 画面は公式サイトデモより Webインタフェースの欠点は数多いが、その一つがファイルアップロードに関するものだろう。複数ファイルをアップロードできない、ドラッグアンドドロップは使えないなど様々な不満点が存在する。 一括で複数ファイルをアップロードできる そんなブラウザ上の欠点を補ってくれるのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはFancyUpload、複数ファイルのアップロードを可能にするライブラリだ。 FancyUploadはJavaScriptやPHPスクリプトそしてFlashなどからなるライブラリ群で、Flashを使って複数ファイルのアップロードを行う。そして非同期的に通信を行うことでアップロードの進捗がとれるようになっている。もちろん進捗の状況連絡はPHP以外（Railsなど）でも行える。 アップロード中 JavaScriptライブラリの一つであるMoo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.web-development-kb-ja.site/ja/javascript/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E9%9D%9E%E5%90%8C%E6%9C%9F%E7%9A%84%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/958371745/
https://www.dropzonejs.com/
画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10:phpspot開発日誌