[JavaScript] ファイル選択ダイアログを表示してファイルを読み書きする - Qiita
※2024-09-10: 記事を全体的に編集しました。 本記事では、ユーザーが <a> 要素や <input> 要素をクリックしたタイミングでなく、JavaScript のコード中の好きなタイミングでファイル選択ダイアログを出す方法について説明します。 click イベントが発生してから何か処理をした後にダイアログを出したい場合も有効です。 ※新しいタブでファイルを表示する場合またはファイルを開く場合、ユーザーの操作によってコードが実行されなければ多くの WEB ブラウザでブロックされます。 本記事では document.createElement() で HTML 要素を作成しますが、静的な HTML でも同様です。 1. ファイルを保存する データから URL を生成する方法がいくつか有ります: オブジェクト URL を使う データ URL を使う 生成した URL を <a> 要素で
![[JavaScript] ファイル選択ダイアログを表示してファイルを読み書きする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/895a46ce6b5bd06c129899afed37888d4d581621/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjMyMDY3JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTE2Mjk0Njc1P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWUyODBiODMxMDExYmZlYzgwZTI5MGY1NWFmYTFmMGM5%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D302cbb6a8e852441c615471dd4bf24a7%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MyU5NSVFMyU4MiVBMSVFMyU4MiVBNCVFMyU4MyVBQiVFOSU4MSVCOCVFNiU4QSU5RSVFMyU4MyU4MCVFMyU4MiVBNCVFMyU4MiVBMiVFMyU4MyVBRCVFMyU4MiVCMCVFMyU4MiU5MiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MyU5NSVFMyU4MiVBMSVFMyU4MiVBNCVFMyU4MyVBQiVFMyU4MiU5MiVFOCVBQSVBRCVFMyU4MSVCRiVFNiU5QiVCOCVFMyU4MSU4RCVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTJiYWYzZTdmZmZkY2MxNjJhZWZhNmI2NmE5NWVhZGUx%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrZXJ1cGFuaTEyOSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWEzNmFiNDIwMjg4YjFiMjJkZDZhYzQwYmY1MmQzNGI0%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd4072ee2900a2b8ccdf728020c5634d7)
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
JSON · JavaScriptの入門書 #jsprimer
JSON この章では、JavaScriptと密接な関係にあるJSONというデータフォーマットについて見ていきます。 JSONとは JSONはJavaScript Object Notationの略で、JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマットです。 JSONの仕様はECMA-404として標準化されています。 JSONは、人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行える形式になっています。 そのため、多くのプログラミング言語がJSONを扱う機能を備えています。 JSONはJavaScriptのオブジェクトリテラル、配列リテラル、各種プリミティブ型の値を組み合わせたものです。 ただしJSONとJavaScriptは一部の構文に違いがあります。 たとえばJSONでは、オブジェクトリテラルのキーを必ずダブルクォートで囲まなければいけ
jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う（タイマー処理）方法｜BLACKFLAG
JavaScriptでのfunctionを一定の間隔で繰り返し処理を行う時の指定に使う「setInterval」。 jQueryでこの指定を使うこともでき、単純な記述ですが、さまざまなループ処理などにも使えるので参考までに使い方をメモ書きしておきます。 $(function(){ setInterval(function(){ ～ここに処理を記載～ },1000); }); 最後の数値部分は繰り返し処理を行う間隔になります。 例えば、3秒ごとに画像の位置を10pxずつ、ズラす場合は $(function(){ $('img').css({left:'0',position:'absolute'}); setInterval(function(){ $('img').stop().animate({left:'+=' + '10' + 'px'},1000); },3000); }); この
jQuery.Defferredを使ったdone無限ループとSleepで簡単ポーリング - それマグで！
jQuery.Defferredを使うと、イベントキューを管理しなくても、メソッドに書けばよくなって便利になる。 sleep関数を実装する。 定番のSleepを実装する var wait_time = function(time){ return (function(){ var dfd = $.Deferred() setTimeout(function(){ console.log("resolve#wait_time("+time+") ");dfd.resolve(); }, time); return dfd.promise() }) } sleep 起動 var sleep = wait_time(200) $.when(sleep) .then(wait_time(200)) .then(wait_time(201)) .then(wait_time(202)) .done(
はじめてのAjax(jQuery) 2018年版 - Qiita
2018/03/21 2018年版に再編集 はじめに：Ajaxとは Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。 簡単にまとめると次のようになります。 ページ遷移をさせず（非同期処理で）コンテンツを書き換えられる 他の処理と同時並行で、サーバとやりとりができる また、jQueryでのAjax実装が手軽なので、今回はjQuery、ローカルサーバにMAMPを使用しています。 最初は、pythonやnodeなどのワンライナーでのローカルサ
オブジェクトを作成する
オブジェクトを新しく作成する方法について解説します。 JavaScript ではオブジェクトリテラルを使って作成する方法と、 Object オブジェクトのコンストラクタを使って作成する方法があります。
jQueryオブジェクトとは?
jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ
【WordPress】キャッシュを有効化しつつ［CSS］や［JavaScript］ファイルの変更を確実に反映させる方法。
株式会社オンズ 開発ブログ 【WordPress】キャッシュを有効化しつつ［CSS］や［JavaScript］ファイルの変更を確実に反映させる方法。 ウェブサイト開発時に、［CSS］や［JavaScript］が即時に反映されないケースが多々あります。 これはブラウザが［CSS］や［JavaScript］のキャッシュファイルを保持しているために、修正前のデータを参照してしまうために起こる問題です。 弊社オンズが制作している全てのサイトでも、レスポンス向上のためにキャッシュを利用していますが、何も対策を講じないと修正内容が反映されずに業務に支障が生じる場合もあります。 特に開発環境では頻繁にファイルを更新するため、変更を確実に反映させるテクニックを用いるべきです。 例えばブラウザ側で全てのキャッシュをクリアすれば解決しますが、ファイルに変更を加える度に必要になる作業なので、それも面倒です。 シ
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
javascriptファイル内で外部javascriptを読み込む方法について
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
IEのconsole.logでのエラー防止 - Qiita
javascriptで開発しているとconsole.logでデータを確認することはよく有ります。 完了したら削除しますが、つい削除し忘れていると IEでエラーが出て止まってしまうことがあります。 IE9以前だと開発ツールを起動していないとconsoleAPIが有効にならないため、 consoleがundefinedになるようです。 ついつい消し忘れてしまう人は以下を入れておくとIEユーザーに文句を言われません。 // IEのconsole.logエラー防止 if(!window["console"]){window["console"]={};window["console"]["log"]=function(){}}
static - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016. Learn moreSee full compatibilityReport feedback static キーワードは、クラスに静的メソッドや静的プロパティを定義します。静的メソッドも静的プロパティもクラスのインスタンスからは呼び出されません。その代わりに、クラスそのものから呼び出されます。静的メソッドは多くの場合、オブジェクトの生成や複製を行う関数などのユーティリティ関数です。静的プロパティはキャッシュ、固定的な構成、その他の各インスタンスに複製する必要のないデータです。 静的メソッドは多くの場合、オブジェクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでファイルの入出力をしたい時に役立つリンク集 - Qiita
jQueryで高さの取得と設定（height,innerHeight,outerHeight)
【JavaScript】関数定義いろいろ - Qiita
スクロールイベント 上下方向の判定
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
jQueryでスクロール位置を取得・設定する：scrollTop() | UX MILK
【JavaScript】IE9以前でconsole.logを使用しているとハマる - Qiita
