| [ TEXT読込み ] | dated 2012-10-3 Mori Design Office |
|
テキストファイルやcsvファイルを読込みます。 実行はここをクリック 対応ブラウザ： IE, Firefox. Google chrome, Opera。 文字コード切替え： shift-jis, utf-8 ここで、呼込み方法は下記の３通り。 ① FileAPI を用いる方法： ･対応ブラウザ：IE以外の殆ど総て。(IEはvar10で対応とのこと) ･ファイル指定方法：input type=file の操作、Firefox,Google ではドラッグ＆ドロップも可能。 XMLHttpRequestと異なり、呼込み先ディレクトリの制約がない。サーバーアドレス有無に無関係。 ･対応エンコード：２種類切替え可能(shift-jis、utf-8)。 ･呼込み先が決まっている場合の自動読込みは、FileAPIでは不可能、従来方法(下記②③)がある。 ② XMLHttpRequest を用いる方法：総てのブラウザに対応 ･ファイル指定方法：相対パスで指定、またはカレントディレクトリにある場合の ファイル名で指定。 input type=file の操作(ie以外はカレントディレクトリ内のみ可能)。区切り\を/に変換要。 IEで通常のアドレス(C:\･･ など)で、絶対パスのファイル名も可能 IEでサーバアドレス http://localhost/･･では、相対パス指定のみ可能。但しinput type=file の操作で取得できるのは fakepath/ファイル名 となり、事実上のカレントディレクトリ外では不可。 ･対応エンコード：utf-8のみ。Excelによるcsvファイルはshift-jisなので、日本語はボケる ③ fso を用いる方法： ･IEのみ対応、スクリップトは簡単。特にサーバーを必要としない。 ･ファイル指定方法：input type=file の操作、または 絶対パスのファイル名、区切り\を/に変換要。 サーバーApacheのアドレス http://localhost/･･でなく、C:/･･の絶対パスであることが必要。 ･対応エンコード：shift-jisのみ。 ☆ なお、Windows 8 API はここでは除外してますので、公式サイト参照。 →Microsoft: WL.download function 下記はそのソース、JavaScriptコード です。 |
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html,JavaScript,HTML5; charset=shift_jis">
<title>TEXT読込み</title>
<script language="JavaScript">
<!--
// TEXTやcsv ファイルを読込む、３通りの方法から自動選択、 File API及びFSOを優先し、不適でXMLHttp とする。
// 文字エンコードの切替え( shift-jis、utf-8)：File APIは可能、IEではFSOとXMLHttpの切替えによる。
var File;
var $id = function(id) { return document.getElementById(id); }
var Encode = "shift-jis";
var WindowFile = 0;
window.onload = function(){ //イベント登録
var winF;
doc = "";
if(window.File){
winF = 1;doc = "[ File API ]";//operaは参照クリックのみ可能
if(navigator.userAgent.toLowerCase().indexOf("opera")<0){ onload_FileAPI(); doc += " ドラッグ＆ドロップ";}
}
if(document.all==null&&window.File==null){winF = 2;doc = "[ XMLHttp ] カレントディレクトリ内";}
if(document.all){
winF = 3;doc = "[ FSO ]";
if(location.href.substr(0,5)=="http:"){winF = 4;doc = "[ XMLHttp ] カレントディレクトリ内";}
}
if(winF==2||winF==4){$id("en1").style.color = "gray"; encodeTy(2);}
WindowFile = winF;
$id("results").innerHTML = doc;
};
// ① File API ------------------------------------------------------------------
function onload_FileAPI(){
$id("ta").addEventListener("dragover", onCancel, false);
$id("ta").addEventListener("dragenter", onCancel, false);
$id("ta").addEventListener("drop", onDropFile, false); //ドラッグアンドドロップ
}
var onCancel = function(e)
{
if(e.preventDefault) { e.preventDefault(); }
return false;
};
var onDropFile = function(e) { e.preventDefault(); File = e.dataTransfer.files[0]; readFile(File); $id("Ref").reset(); };
var readFile = function(file)
{
$id("f_name").innerHTML = file.name; // ファイル名を表示
var reader = new FileReader(); // Mozilla 規格のオブジェクト
reader.onload = function(e) { main(e.target.result); }; // 読み出し
reader["readAsText"](file, Encode);
//なお、readAsText の他の方法 readAsArrayBuffer,readAsBinaryString,readAsDataURL
};
function onChangeFile(){
if(WindowFile==1){file = $id("buttonRef").files[0]; readFile(file);}//File = e.target.files[0];
if(WindowFile==2){file = $id("buttonRef").files[0].name;XMLHttp(file );}
if(WindowFile==3){//ie
file = en($id("buttonRef").value);
if(Encode=="shift-jis"){$id("results").innerHTML = "[ FSO ]"; FSO(file );}
if(Encode=="utf-8"){$id("results").innerHTML = "[ XMLHttp ]"; XMLHttp(file );}
}
if(WindowFile==4){//ieアドレスhttp://localhost/･･
var sp = (en($id("buttonRef").value)).split( "/" );
file = sp[sp.length-2]; // データアドレスc:\fakepathなので相対パス不明
XMLHttp(file ); // 従ってデータファイルはカレントディレクトリにあるとする
}
if(WindowFile!=1){$id("f_name").innerHTML = file;} // 選択したファイル名を表示
File = file; //文字エンコード切替え用に 広域変数に代入
}
// ② XMLHttp -----------------------------------------------------------------
function XMLHttp(fileName ){ //ファイルにアクセスし受信内容を確認します
var httpoj = createXMLHttpRequest();
httpoj.open( 'GET' , fileName , true );
httpoj.onreadystatechange = function() { httpSate(httpoj); }
httpoj.send( null );
}
function createXMLHttpRequest(){//XMLHttpRequestオブジェクト生成
if(window.ActiveXObject){
try {return new ActiveXObject("Msxml2.XMLHTTP"); } //(MSXML2以)
catch (e) {
try {return new ActiveXObject("Microsoft.XMLHTTP") }//Win ie用(旧MSXML)
catch (e2) {return null}
}
}
else if(window.XMLHttpRequest){return new XMLHttpRequest()} //Win ie以外
else {return null}
}
function httpSate(httpoj){//通信状態確後、結果出力
var disp = "";
var data,i,j,da,line;
if ((httpoj.readyState == 4)){
data = httpoj.responseText; //[6] 通信テキスト文の取得
//cr = csvファイルのデータ区切り(改行コード)、da[i] = 取得データ
var cr = String.fromCharCode(13); //又は cr = new RegExp("\r\n|\r|\n", "g","n");
line = data.split(cr);
for (j=0; j<line.length; j++){
da = line[j].split(",");
i = 0; disp += da[i];
for (i=1; i<da.length; i++){ disp += ","+da[i] ;}
disp += cr;
}
}
else{ disp = "<b>Loading...</b>";}
main(disp);
}
// ③ FSO ------------------------------------------------------------------------
function FSO(fullFileName){
//ie 絶対パスのフルファイル名指定ではFSOを用いる、
var fso = new ActiveXObject("Scripting.FileSystemObject");//ASCIIフォーマットで読み込む
var data = fso.OpenTextFile( fullFileName ,1,true); //読込み（http相対でエラー）
var disp = "";
var i,j,da,line;
while (!data.AtEndOfLine){
line = data.ReadLine();
da = line.split(",");
i = 0; disp += da[i];
for (i=1; i<da.length; i++){ disp += ","+ da[i] ;}
disp += "\n";
}
data.Close();
main(disp);
}
// 共通------------------------------------------------------------------------
function en(o){ //円記号\をスラッシュに置換
var oo = o;
var da,dt;
var cr = String.fromCharCode(92); //円記号
da = oo.split(cr);
dt = da.length-1;
if(dt>0 ){
oo = da[0];
for (j=1; j<da.length; j++){oo += "/"+da[j];}
}
return oo;
}
function encodeTy(n){ //文字エンコード切替え表示、再作動
var c1,c2,c3,c4,cc;
var nn = n;
var winF = WindowFile;
if(winF==2||winF==4){nn = 2;}
if(nn==1){Encode = "shift-jis"; c1 = "yellow"; c2 = ""; c3 = "underline"; c4 ="none";}
if(nn==2){Encode = "utf-8"; c2 = "yellow"; c1 = ""; c4 = "underline"; c3 ="none";}
$id("en1").style.background = c1;
$id("en2").style.background = c2;
$id("en1").style.textDecoration = c3;
$id("en2").style.textDecoration = c4;
if(winF==3){
if(n==1){$id("results").innerHTML = "[ FSO ]";}
if(n==2){$id("results").innerHTML = "[ XMLHttp ]";}
}
if(winF==1){if(File.name){readFile(File);}}
if(File){
if(winF==2){XMLHttp(File);}
if(winF==3){
if(n==1){FSO(File);}
if(n==2){XMLHttp(File);}
}
if(winF==4){XMLHttp(File);}
}
}
function main(data){ $id("ta").value = data;} //データ処理のメイン
//-->
</script><body style="margin-left:30px;line-height:25px">
<span id="results" style="color:green"></span><br>
文字エンコード:
<a id="en1" href="JavaScript:onclick=encodeTy(1)" style="background:yellow;text-decoration:underline">shift-jis</a>
<a id="en2" href="JavaScript:onclick=encodeTy(2)" style="text-decoration:none">utf-8</a><br>
読込みファイル名 : <span id="f_name">XXXXXX</span>
<form id="Ref"><input id="buttonRef" onchange="onChangeFile()" type="file" size="100" style="width:574px"></form>
<textarea id="ta" cols=70 rows=15 wrap="off" style="width:570px;height:300px"></textarea><br> <br>
</body>