jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
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
HTML5 の File API を使ってみる
CSV を読み込んで JSON で出力できるようにします。 CSV の仕様は意外と難しいので、単純にカンマで区切られているテキストファイルだけを想定します。 File API Sample (デモ) simple-usage-fileapi.html (ソース) File API の仕様などはこちら。 基本的にこれらのサンプルスクリプトをまとめたものが、上記のデモになります。 File API - w3.org Reading local files in JavaScript - html5rocks HTML5 File API を使ってファイル読み込み - tmlife.net なお、イベント管理には jQuery を使います。 form を作る まずは <form> 要素を作成します。 複数のファイルを選択できるよう、 multiple を有効にします。 <form> Select
IndexedDBを使ったWebベースのファイル管理·idb.filesystem.js MOONGIFT
idb.filesystem.jsはIndexedDBを使ったWebベースのファイルマネージャです。 Webブラウザ上でまるでファイルシステムのようにファイルやフォルダを階層管理できるのがidb.filesystem.jsです。HTML5のFilesytem APIを使い、データの保存にはIndexedDBを用いています。 デモです。下の方がファイル管理部分になっています。 ファイルをアップロードしました。ウィンドウにドロップするだけです。 画像であればクリックで内容を閲覧できます。 フォルダにも対応しています。 こちらはさらにアイコン表示に対応したモデルです。 ドロップしようとするとウィンドウ全体がハイライト表示されます。 ファイルごとにダウンロードや内容閲覧、削除といったアイコンが表示されます。 ファイルの閲覧している際の表示です。 リスト表示にもできます。 リネームに対応しています。
HTML5のパワー。Webベースでファイルシステムを構築する·Filer.js MOONGIFT
Filer.jsはHTML5のファイルシステムAPIを体感するWebアプリケーションです。 HTML5のAPIの一つ、ファイルシステムAPIを体験できるのがFiler.jsです。新しいWebの可能性を存分に知ることができます。 デモです。まずディレクトリをインポートします。 インポートしました。ディレクトリはマウスでたどれます。 アイコンまたはリスト表示をサポートしています。 画像やHTMLであればプレビューができます。通常のファイルはプレビューできませんがダウンロードはできます。 リスト表示です。 ログを表示しています。 Filer.jsではWebブラウザ上でディレクトリやファイルを作成することもできます。しかし実際のファイルシステム側には影響されませんのでご注意ください。また新しいフォルダやファイルをローカルに作っても反映されないようです。 Filer.jsはHTML5/JavaScr
Netforest Developer's Note - HTML5 Drag and Drop APIとFile APIのデモ
take©です。 まずはこれをみていただきたい。 Amazing! ブラウザにドロップした画像ファイルの内容が表示されているではないですか。 さらには、テキストファイル、動画ファイル、Webページのサムネイルまでドラッグ＆ドロップで表示できています。 ついにここまで来たんですね。 元ネタはこれ。 モジラのHacks Blogで公開されたDrag and Drop APIとFile APIを使ったデモです。 http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/ (元記事) http://demos.hacks.mozilla.org/openweb/DnD/ (デモ) このデモはFirefox 3.6 betaが実装したHTML5の新しい規格、Drag and Drop APIとFile APIで実現されていま
W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート
現在W3Cで仕様策定が進められているFile APIを使うと、JavaScriptからローカルファイルの情報や内容にアクセス出来るようになります。 Firefoxでは3.0時代から似たような機能が実装されていたようですが*1、今回やや仕様を変更した上で標準化されます。 まだワーキングドラフトの段階ですが、Firefox 3.6 RC1*2に既にほとんどのAPIが実装されていますので、今すぐに使ってみることができます。 そこで、試しにこんなサンプルを作ってみました。Firefox 3.6で以下のページにアクセスしてみてください。 JavaScriptでネガポジ反転 ファイル選択欄でビットマップファイル（.bmp）を選択、あるいはブラウザにドラッグアンドドロップすると、その画像をネガポジ反転（階調の反転）して表示します。複数選択も可です。*3 *4 ↓実行例 ファイル加工の際にサーバと一切通信
File API (W3C Working Draft 26 October 2010)
File API W3C Working Draft, 6 February 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-FileAPI-20230206/ Latest published version: https://www.w3.org/TR/FileAPI/ Editor's Draft: https://w3c.github.io/FileAPI/ Previous Versions: https://www.w3.org/TR/2022/WD-FileAPI-20221130/ History: https://www.w3.org/standards/history/FileAPI Feedback: GitHub Inline In Spec Edit
File APIを使ってドロップでファイルをアップロードできるjQueryプラグインを作ってみる | @blog.justoneplanet.info
■ダウンロード クリックしてダウンロードして下さい。 ■動作ブラウザ Firefox 3.6+, Google Chrome 6+ ■使い方 1.HTMLでプラグインを読み込む jQuery本体を読み込んだ後にプラグインのJavaScriptを読み込む。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.dropUploader.js"></script> 2.JavaScriptでプラグインを設置する 以下のようにして、p.uploaderにファイルをドロップすると、ファイルをアップロードすることができる。 $(function()
createObjectURLがすごい件 - プログラムモグモグ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
FileAPIのcreateObjectURLを試してみました 2（音声ファイル再生版） - jsdo.it - Share JavaScript, HTML5 and CSS
前回のヤツ（http://jsdo.it/Masayuki.Maekawa/dzCw）の話になって 会社の後輩：「音声ファイルをドラックしてプレイヤー起動とかできるんですかね？」 私：「imgタグ入れるようにHTML5で再生のタグ入れてしまえばできるんじゃない？」 後輩：「なるほど」 私：「やってみればいいんじゃない」 後輩：「HTML5知らないんですよね」 私：「じゃ、無理だよね」 ---会話終了--- ということでこのままだと不毛すぎて泣いちゃうので音声ファイル版を作成しました。 【ご注意】 利用方法は http://jsdo.it/Masayuki.Maekawa/dzCw 基本同じです。 audioのプレイヤーは下部に出てきます。 ブラウザのサポートなどは一切考慮していないので再生できない形式のファイルをドラッグしてもプレイヤーは表示されます。 FileAPIを実装しているブラウザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://japan.internet.com/webtech/20111214/1.html
fam.cx