AjaxでFormDataを使ってファイルアップロードする
Ajaxを利用してファイルアップロードする。 今回はFormDataを利用してファイルをアップロードする。 FormData は XMLHttpRequest Level 2 でサポートされたもので、Ajaxでの値の送信をより簡単な物にしてくれる。 FormDataの使い方 FormDataの使い方は簡単で、new して append するだけ。 値をappendした FormData オブジェクトは、ajaxのdataにセットするだけ。 FormDataについては以下を参照 FormData – Web API リファレンス | MDN FormData オブジェクトの利用 – Web developer guide | MDN FormData でファイルの送信をする FormData は、Ajaxを使ったファイルアップロードも簡単に書ける。 こんな感じの簡単なformを作る。 jsは
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
html５のW3C FileAPIについて、調べてまとめた。 - それマグで！
html5のファイルAPIについて調べた。http://www.w3.org/TR/FileAPI/ を読みながら、メモ。やっぱり本家ドキュメントは頼りになるのね。 FileAPIはなにか ローカルファイルにアクセスできる。 アクセスできるローカルファイルはinput で指定された物だけ。*1 使い方 input に files タイプを指定するとFileAPIの対象になる。 <input type=files > filesタイプの読み込み方 file = document.forms[0].elements[0].files[0] このように、<input type=files/>へJS経由でアクセスできる。 input type=filesの項目は、複数ファイルの配列になっている。FileListオブジェクト呼ぶ FileList オブジェクト 通常の配列みたいなオブジェクトして定義
Camera API の利用 | MDN
This is an archived page. It's not actively maintained. Camera API によってデバイスのカメラで写真を撮影して、その写真を現在表示している Web ページへアップロードすることができます。これは、type="file" および画像を受け入れることを宣言する accept 属性を持つ input 要素によって実現します。以下のような HTML です: <input type="file" id="take-picture" accept="image/*"> ユーザがこの HTML 要素をアクティブにするとファイル選択の選択肢が表示され、そのひとつとしてデバイスのカメラがあります。ユーザがカメラを選択すると、写真撮影モードに移行します。写真が撮影されると、ユーザに対してその写真を決定するか破棄するかの選択肢が現れます。決定した場
HTML5 の File API でローカルファイルを扱ってみる
Posted: 2012.12.13 / Category: javascript / Tag: HTML5, jQuery HTML5 の File API を使用することでドラッグ＆ドロップでの複数ファイルの取得や、ローカルファイルのちょっとした加工などができるようになりました。 この記事では、画像とテキストファイルを簡単に表示する方法をご紹介します。 html html はファイルをドロップする div と表示する div を用意します。 html <p> ファイルをドロップしてください。</p> <div id="file-input"> <div class="input"></div> <div class="out"></div> </div> cssでドロップするdivを大きくしておくと良い感じだと思います。 css #file-input div.input { padd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE10で動くHTML5アプリ実装例 「File APIを利用したアプリ」