JavaScript: ローカルのJSからfetch APIでGETしたJSONをFileSaver.jsを使ってファイルに保存する - Qiita
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="FileSaver.js"></script> </head> <body> <input type="button" value="取得" onclick="apiRequest()" /> <div id="export"></div> <script> async function apiRequest() { const downloadUrl = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=1620825"; const response = await fetch(downloadUrl); const blob = response.blob(
HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita
はじめに みなさんHTMLタグの一つであるinputタグはご存知だと思います。 その中でもtype="file"についてぼくはこんな疑問を持ちました。 選択したファイルはどこのファイル？コピーとかされているの？ これみなさん知っていますか？ ちょこっと調べたんですがなかなか情報がなかったので いろいろ自分で調査してみました。 （本音は調査が面白そうだったのでそんなに本気で調べてないだけです 仮説を立てる まずは仮説をいくつか立ててそれぞれを検証していきます A. ブラウザはファイル参照だけ持っている B. ファイル選択時にTemp領域へコピーしている C. メモリ上に抱えている たぶんこれらのどれかじゃないかなと思っており、 個人的にはBが濃厚だと勝手に考えています。 調査開始 ファイルアップロード機能が必要なので 簡単にファイルをアップロードするだけのアプリを自前で作りました。 http
![HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25b21d397939f0d7235132405e4e3d079e25f683/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9SFRNTCVFMyU4MSVBRWlucHV0JUUzJTgyJUJGJUUzJTgyJUIwJTVCdHlwZSUzRGZpbGUlNUQlRTMlODElQUUlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODElOTQlRTMlODElQTglRTMlODElQUUlRTYlOEMlOTklRTUlOEIlOTUlRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYlRTglQUElQkYlRTMlODElQjklRTMlODElQTYlRTMlODElQkYlRTMlODElOUYmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWI1ODJlZjU4ZjZiYTRkMDc1OWRkOWI5ZTU3MWUyNmM4%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFxbSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTg1YjQ4NmExMDFkMTk0NzA5YzgwOTE4NjgxNGIyNjI%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D508d85eb5f1b0c24123e22a78b678e51)
$.ajaxファイルアップロードでの進捗表示 - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。フロントエンドエンジニアの本間です。 今日は$.ajaxファイルアップロードでプログレスバー表示についてです。 UIUXにおいて体感速度を短縮するのは重要で、同じ待ち時間でも進捗表示することによって体感速度が向上します。 さらにプログレスバーの色や模様によっても体感速度が変わってくるという研究結果もでているようです。 gigazine.net PRTIMESでは企業管理画面のリリース配信登録画面でワードファイルをアップする際に使っています。 やり方は$.ajaxの引数にxhrオブジェクトを渡し、progressイベントハンドラで取得します。 $.ajax({ url : api.url, async: true, xhr : function(){ var XHR = $.ajaxSettings.xhr(); if(XHR.upload){ XHR.upload.addEve
JavaScriptからファイルをダウンロードさせるのはどうしたら良いですか？
contentをfileNameでダンロードしたい場合の実装 contentは生の文字列 var downloadAsFile = function(fileName, content) { var blob = new Blob([content]); var url = window.URL || window.webkitURL; var blobURL = url.createObjectURL(blob); var a = document.createElement('a'); a.download = fileName; a.href = blobURL; a.click(); }; コレでも可 var downloadAsFile = function(fileName, content) { var a = document.createElement('a'); a.d
アップロード支援JSライブラリ「Fine Uploader」の必要最低限サンプル - Qiita
Fine Uploader は便利 Fine Uploader は他ライブラリへの依存がなく、高機能で主要ブラウザはもちろん、IE8+にも対応していて助かる。 助かるんだけど、機能がありすぎて少しとっつきにくいのが難でいつも忘れる。 ここでは、高機能っぷり発揮のデモほどのものは不要で、必要最低限でいいって時のサンプルをメモ。 「CORE」のみを利用 Fine Uploader には 基本機能(CORE) と UI機能 というのがある。 UI機能は独自のテンプレートエンジンとか使って簡単にUI周りが作れるようなやつなんだけど、今回は割愛し、使うのはCOREの機能のみ。 （UI機能にはすべてのCORE機能が含まれる） COREのみを利用する場合、インスタンスは以下のように作成する。 qq というのは Fine Uploader の本体オブジェクトで、qq という名前で決まってる（何の略かは知ら
【Java入門】Javaのファイル出力方法 詳細まとめ
Javaプログラミングで、ファイル出力は必須の技術だ。 データベースを使えない際のデータ保存や、ユーザ利便性のためのCSV出力など様々な場面で活躍する。 このページではJavaのファイル出力方法についてまとめた。ファイル出力方法を調べている方には参考になるだろう。 Javaによるファイル出力の基本 Javaに限らず、どんなプログラム言語であっても、ファイル出力処理の流れはほとんど変わらない。次の流れだ。 ファイルを開く ファイルの中身を書き込む ファイルを閉じる 例えば、ファイルに文字を出力する処理を最もシンプル記述すると、以下のようになる。 import java.io.FileWriter; import java.io.IOException; public class Main { public static void main(String[] args) { try { Fil
node.jsで階層ディレクトリ作成やコピーをしたいときは？ - Qiita
node.jsには標準でfsという普通に便利なファイル操作のライブラリがあります。しかし、fsにはプリミティブな機能しか用意されておらず、ディレクトリ階層を操作するにはひと手間必要になってしまいます。 例えば、 ディレクトリがなければ掘る(mkdir -pに相当)とか ディレクトリ階層を丸ごとコピー(cp -rに相当)とか ディレクトリ階層を削除(rm -rfに相当) などの機能はありません。 それぞれ自作していくのもまぁ大きな手間ではありませんが、node-fs-extraというfsを拡張したモジュールを使うと、どれも簡単に実現できてしまうので、紹介します。 インストール
jQueryプラグインの「jQuery File Upload」を使って画像アップロード時にサムネイルを表示したいのですがやり方が分りません。…
jQueryプラグインの「jQuery File Upload」を使って画像アップロード時にサムネイルを表示したいのですがやり方が分りません。 具体的には ユーザーがアップロードする画像を選択 ↓ クライアント(ブラウザ)側で画像のサムネイルを表示 ↓ 自動的に画像をサーバーにアップロード という流れを行いたいのですが、デモページ(後述)のソースを参考にしてもいまいち理解できませんでした。 具体的にどのような設定を最低限行えば動作しますでしょうか。簡単なサンプルで構いませんのでソース付きだと大変有り難いです。宜しくお願いします。 jQuery File Upload Demo https://blueimp.github.io/jQuery-File-Upload/basic-plus.html jQuery File Upload(ドキュメント) https://github.com/b
AngularJSでファイルをアップロードする - Qiita
AngularJSでファイルをアップロードしたい。画像の場合はアップロード前にプレビューもしたい（追記：さらにドラッグアンドドロップにも対応）。 私の書き方も悪いのでしょうけど、Angularだから特に楽ってことはないな。まあ、素直にng-file-upload使えばいいのだろうけど。 前提知識 <input type="file">のファイル（名）は標準ディレクティブでは取得できない。 FormDataを利用して、かつ、multipart/form-dataで送る。 つまり、カスタムディレクティブを定義する必要がある。 HTML（フロント） ソースは少々長いが、やっていることは至ってシンプル。要所はカスタムディレクティブのところ。 ディレクティブ名はキャメル形式が-とかに変わる（hogeFooはhoge-fooというディレクティブ名になる） DOMからscopeへの値の紐付けのタイミング
バージョニングファイルシステム『NILFS』を使ってファイルのバージョン管理をしてみた | 俺的備忘録 〜なんかいろいろ〜
間違えてファイルの上書きをしてしまったりして、バックアップを取得していないとかなり大変な事になる。 そんなときでも、ファイルシステムでバージョン管理ができれば過去のバージョンのファイルをスグに取り出す事ができる。 今回は、そんなバージョン管理が出来るファイルシステム『NILFS』を利用し、ファイルのバージョン管理をしてみようとおもう。 『NILFS』は数秒、または同期書き込みのタイミングで変更のあった場合、その時点でのチェックポイントを生成してくれる。管理者は、そのチェックポイントの中から重要なバージョンを戻したり、スナップショットとして変換できる。このスナップショットはSambaでWindowsのShadow Copy機能で利用できるので、バージョン管理ファイルサーバーを簡単に構築することもできる。 なお、今回の検証はCentOS 7で行う。 1.インストール DebianやUbuntu
ファイル形式変換サービスはCloudConvertが最強ぽい
ファイル形式の変換の必要があることって画像でもテキストでも結構あると思うんですけど、そのほぼどれもに対応してくれるCloudConvertが便利なので紹介します。 別に新しくできたってわけではなく前からあるんですがほんとに便利だったので紹介します。 ファイル形式の変換って色々やりますよね。私がやることがあるのは例えば動画をGIFにとか、WordのファイルをPDFにということもありますね。そういったことにはこのCloudConvertが便利です。 CloudConvertの機能 CloudConvertはやろうと思ったことのある、たいていのファイル形式の変換に対応しているファイル形式変換サービスです。対応しているファイルの種類は以下の通り。 アーカイブファイル 音声 CAD 文書 ebook フォント 画像 プレゼンスライド スプレッドシート ベクターデータ 動画 Webサイト これらを更に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
add XHR2 progress events to jQuery.ajax
オープンソースのWebファイルマネージャー・「filemanager」
http://blog.yuku-t.com/entry/20090610/1244650026
カッコ悪いinput[type=file]をモダンにしてドラッグ＆ドロップ対応にする「Dropify」:phpspot開発日誌
GitHub - CreativeDream/jQuery.filer: Simple HTML5 File Uploader, a plugin tool for jQuery which change completely File Input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-scree
Loading...