HTML5 FileAPIの不満な点
こんにちは、martinです。なかなかまとまった時間が取れないので、ppBlogの最新版をリリースできずにいます 最新版のバージョンとしては、v1.9.0を予定しています。新機能としては、コメント認証機能だとか、HTML5を意識したppBlogエンジンでしょうか（ちなみにテーマBasicのソースはHTML5仕様ですよ）。 で、このHTML5なんですが。過去のエントリーでいくつかあるように、最新版では、記事投稿の際に複数ファイルアップロードが可能になっています。HTML5のFileAPI を積極的に採り入れたものにしようか、それとも「レガシーな」もので実現させるか迷いましたが、とりあえず「レガシー」なバージョンで行こうと思います。理由はいくつかありますが、一番の理由は、どうもHTML5のFileAPIの使い勝手が悪い点です。 ブログでの写真投稿において、一度に複数枚の写真を選択してアップロー
JavaScriptでローカルファイルを自在に操る - File API
※ただし、SafariではFileReaderオブジェクトを、Internet Explorer 10ではreadAsBinaryStringメソッドをサポートしていません。 TIPS 053：ファイルの名前／種類／サイズを取得する Fileオブジェクトを利用することで、ローカルファイルの情報にアクセスできます。 例えば以下は、<input type="file">要素で指定されたファイルの名前やサイズなどを表示するサンプルです。 ［リスト01］ファイルの情報を取得するコード（fileinfo.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" />
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
[HTML5] File APIを用いてローカルにある画像ファイルをプレビュー。実装してみた！ - YoheiM .NET
今日は久々のHTML5への挑戦。 File APIを用いて、ファイルダイアログで選択された画像ファイル（JPEG, PNG, GIF）を、 ページ上にプレビュー表示するサンプルプログラムを作成してみました。 サンプル紹介と実装内容をブログに残したいと思います。 http://www.yoheim.net/labo/html5/fileapi/fileapiImage.html 使い方 使い方はいたって簡単で、ファイルダイアログで画像ファイルを選ぶだけです。 選んだファイルがサムネイル表示されます！ ファイルを複数選択して、画像をいっぱい表示する事もできます。 実装内容 HTML5のFile APIを用いた実装です。 HTMLファイル FileUploadを行うファイルダイアログと、画像のプレビューを表示するDIVがポイントです。 <html> <head> <title>File APIを
File API入門 | 前編 File APIとFileReader APIの利用
読み込み完了時にデータを表示する とても簡単に書けます。HTMLは最初のものと同じです。 var inputFile = document.getElementById('file'); var reader = new FileReader(); function fileChange(ev) { var target = ev.target; var file = target.files[0]; var type = file.type; var size = file.size; if ( type !== 'image/jpeg' ) { alert('選択できるファイルはJPEG画像だけです。'); inputFile.value = ''; return; } reader.readAsDataURL(file); } function fileLoad() { consol
ときどきWEB | HTML5のFile APIでローカルファイル情報取得してやんよ!!!
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
スマホ用のクールなアップローダーを作る - Qiita
コンセプトは６つ ・簡単にアップロードできる ・クライアントサイドで画像のサムネイルを作る ・複数のファイルをアップロードできる ・画像をソートしてアップロードできる ・スマホの写真が時々回転してしまうので対策しよう ・そのままスマホの写真を複数アップロードできるようにすると ファイルサイズがえらいこと（１枚４Ｍ！）になったので クライアント側で画像を縮小 ・もちろんAjaxでアップロードだ！ こんなアップローダーを作りたいの。でも、きっと夢ね…。 偉大なるプログラマーに敬意を！ このアップローダーを作るにあたり以下のプログラムを使わせてもらった。 @stomita megapix-image.js https://github.com/stomita/ios-imagefile-megapixel @jseidelin exif-js https://github.com/jseidel
Blog
明示的 意味 แพลตฟอร์มการเรียนรู้และพัฒนาทักษะด้วยเทคโนโลยี https://suin.io เป็นแพลตฟอร์มที่ให้คุณเรียนรู้และพัฒนาทักษะทางเทคโนโลยีอย่างสะดวกสบาย เรามุ่งมั่นในการให้ความรู้และประสบการณ์ที่มีคุณค่าในการพัฒนาตนเอง pascalcase
HTML5 File APIを使ってローカルファイルを読み込む方法 | TechBooster
HTML5で追加されたFile APIと呼ばれる機能を使うと、ブラウザ上で ローカルファイルを読み込んだりすることが簡単にできます。 ユーザがローカルファイルを選択するには大きく2つの手段があります。 HTMLのファイル選択フォーム(inputタグにtype=”file”とする)で指定する ドラッグ＆ドロップでファイルを指定する(ドラッグ&ドロップAPIを利用する) 今回はシンプルにファイル選択フォームを使ってローカルファイルを選択し、 選択したファイルのファイル情報をブラウザ上に表示する方法について紹介したいと思います。 （2つ目のドラッグ＆ドロップに関する説明は次回解説致します！） 詳細は続きからご覧下さい。 まずはファイル選択フォームを用意します。 <input type="file" id="MyFile" onchange="checkFiles()"> typeに“file”と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアプリケーションからのファイルの使用 - Web API | MDN
jsで複数画像のファイル名、画像の表示
Resize multiple images without uploading on a Server using Canvas and FileReader API