FileAPI
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*FileAPI
ローカルファイルの利用
~
HTML5では、ファイル操作に関する ''File API'' が定義されま...
ここで紹介するのは、閲覧者の手元(ローカル)にあるファイ...
&small(このサンプルでは、あくまでも、あなたのブラウザ上に...
~
***サンプル
-DEMO:https://koichi-inoue.github.io/FileAPI/
-CODE:https://github.com/koichi-inoue/FileAPI/
~
***スクリプトの概説
-1) ドラッグ&ドロップイベントを検知したら GetImage関数を...
img.addEventListener("dragover",function(ev){ ev.prevent...
img.addEventListener("drop", function(ev){ ev.preventDef...
-2) GetImage()関数内では、まず変数 file にファイルを取得...
file = ev.dataTransfer.files[0];
-3) FileReaderオブジェクトを生成して file からデータの読...
reader = new FileReader();
reader.readAsDataURL(file);
-4) ファイルの読み込み操作が完了した後に FileReader.resul...
reader.onloadend = function() {
img.setAttribute("src",reader.result);
:
~
~
終了行:
*FileAPI
ローカルファイルの利用
~
HTML5では、ファイル操作に関する ''File API'' が定義されま...
ここで紹介するのは、閲覧者の手元(ローカル)にあるファイ...
&small(このサンプルでは、あくまでも、あなたのブラウザ上に...
~
***サンプル
-DEMO:https://koichi-inoue.github.io/FileAPI/
-CODE:https://github.com/koichi-inoue/FileAPI/
~
***スクリプトの概説
-1) ドラッグ&ドロップイベントを検知したら GetImage関数を...
img.addEventListener("dragover",function(ev){ ev.prevent...
img.addEventListener("drop", function(ev){ ev.preventDef...
-2) GetImage()関数内では、まず変数 file にファイルを取得...
file = ev.dataTransfer.files[0];
-3) FileReaderオブジェクトを生成して file からデータの読...
reader = new FileReader();
reader.readAsDataURL(file);
-4) ファイルの読み込み操作が完了した後に FileReader.resul...
reader.onloadend = function() {
img.setAttribute("src",reader.result);
:
~
~
ページ名: