JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」:phpspot開発日誌
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 2011年03月22日- jQuery File Upload Demo デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 ファイルアップロード用のプラグインはよくありますが、このプラグインでは、デスクトップにあるファイルをブラウザにそのままドラッグ＆ドロップでファイルアップロードが完結します。 ダイアログからいちいちファイルを選択して、というUIは使いづらいですが、これなら直感的に、初心者でも簡単にファイルをアップロードすることが可能になります。 尚、Firefox、Chromeで動作。IEでは動きませんでした。 デスクトップからファイルをドラッグすると枠がニュイーンと広まって、ドロッ
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
digitarald » FancyUpload
FancyUpload - Swiff meets Ajax (v3.0) Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers. Showcases Attach a File A red
今話題の健康食品、ユーグレナ(ミドリムシ)の秘密 | ミドリムシの秘密をご紹介します。
近頃、ユーグレナという単語を見聞きしたことがありませんか？ ユーグレナとは「ミドリムシ」の学術名称であり、小学生の理科で必ず習うあのミドリムシのことです。 そのミドリムシに注目して、最初に大量培養に成功したのが「株式会社ユーグレナ」であり、2005年以来、沖縄県の石垣島でミドリムシを培養しています。 現在では、健康食品やサプリメント、他にも化粧品としても注目が集まっています。 そこで今回は、ユーグレナ(ミドリムシ)とは何なのか順を追ってご説明したいと思います。 ここからは、分かりやすく「ユーグレナ」で、話を進めていきます。 ◆そもそも「ユーグレナ」とは何なのか？ 最初に触れた通り「ミドリムシ」の学術名が「ユーグレナ」であり、名前に「ムシ」と付くので「虫」をイメージする方もいますが、虫ではなく「藻」に分類されています。 正式には、ユーグレナ植物門ユーグレナ藻網ユーグレナ目に属する鞭毛虫の仲間
jqUploader demo
Use Case 1: as part of a form with other input fields Example: send a picture by email, the user must fill in its email and its correspondant email address In this scenario, When the upload is finished, the jquUploader is replaced by a text input field. This makes it easy to then submit your form and save the file path to a database field for instance, along with the rest of the form fields. Note
Queued Photo Uploader » FancyUpload - Swiff meets Ajax Showcase » digitarald:Harald Kirschner
FancyUpload - Swiff meets Ajax (v3.0) Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers. Showcases: Attach a File Queu
AJAX Multiple File Upload Form Using jQuery - WPLoaded
Multiple file upload forms are sometimes essential for your web application but managing upload from multiple file input boxes becomes a bit tedious and lengthy. But thanks to jQuery using which we can make this task easier too. Today I’m going to create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface. For this tutorial, i
Plupload: Multi-runtime File-Uploader
Upload in HTML5 We are using HTML5 APIs. Always. Plupload is based on multi-runtime pollyfills for XMLHttpRequest L2, File and Image APIs. So when there's no HTML5 available in the browser, we emulate it ourselves. mOxie (combined code-name for pollyfills) is completely standalone and available separately. Drag'n'Drop Files from Desktop Files not only can be picked from browse dialog, but also can
jQuery.upload: A simple ajax file upload plugin
See related links to what you are looking for.
jQueryでAjaxファイルアップロードするためのライブラリ:phpspot開発日誌
Ajax file upload with jquery - valums.com jQueryでAjaxファイルアップロードするためのライブラリ。 次のようなアップローダーを実装できます。 必要なファイルを読み込んだ後、次のようなスクリプトでアップローダーを初期化します。 なかなかわかりやすい使い方になっていますね。 $(document).ready(function(){ $.ajax_upload('#div_id', { // Location of the server-side upload script action: 'upload.php', // File upload name name: 'userfile', // Additional data to send data: { key1 : 'value', key2 : 'value2' }, // Fire
ファイルのすべてを飲み込む方法
原稿を落としたら，すしをおごりにアメリカに行かないといけないとの噂にgkbrしているid:hakobe932です． 932は草津の932です．こんにちは． ファイルの中身をすべて読み込む処理というのは，非常によくある処理です．TIMTOWTDIが信条のPerlでは，ファイルの中身をすべて読み込む方法もたくさんあります．ここでは，どんな方法があるのか見てみましょう． 行単位で読み込む もっともシンプルなのは行入力演算子(<>)を使って行毎にデータを読み込み，それを連結する方法です． open my $fh, '<', './inputfile' or die "failed to open: $!"; my $content = ''; while (my $line = <$fh>) { $content .= $line; } print $content; もう少し工夫して後置whil
マルチファイルのアップロードを可能にするクールなjQueryプラグイン「uploadify」:phpspot開発日誌
JQuery File Upload Plugin Script - Demo - Uploadify マルチファイルのアップロードを可能にするクールなjQueryプラグイン「uploadify」。 「BROWSE」ボタンを押すと、ファイル選択ダイアログが立ち上がり、次のようにファイルが追加されていきます。 Upload Files を押下すれば、アップロードがリアルタイムで開始されます。 実装コードなのですが、次のようにシンプルで分かりやすいものになっています。 <body> <input type="file" name="fileInput" id="fileInput" /> <script type="text/javascript"> $(document).ready(function() { $('#fileInput').fileUpload ({ 'uploader'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cool-javascripts.com/jquery/jquery-ajax-file-upload.html
GitHub - fyneworks/multifile: jQuery Multiple File Selection Plugin
画面遷移なしのAjaxでファイルアップロードするjQueryプラグイン10:phpspot開発日誌
GitHub - RonnieSan/uploadify: A jQuery plugin for file uploads.
http://valums.com/ajax-upload/
perl-mongers.org