- PR -

JavaScriptでファイルをアップロード

1
投稿者投稿内容
未記入
会議室デビュー日: 2005/05/14
投稿数: 3
投稿日時: 2005-05-14 00:37
初心者なので、的が外れた質問かもしれませんが、
JavaScriptで、<input type="file"　を使用せずに、ファイルをアップロードする方法は、
あるのでしょうか。

実現したい事は、入力画面でアップロードファイル名を入力後、入力確認画面へ移動し、
確認画面でアップロードファイル名を表示した後、実際のアップロードを行いたいのです。
確認画面では、テキスト表示になってしまいますので、<input type="file"が使用できず、
悩んでおります。

WEBで探してみているのですが、type="file"を使用せずには、セキュリティ上、無理のようです。
どなたかご存知の方、ご教授下さい。ヒントでも構いません。
お願い致します。

山本 裕介
ぬし
会議室デビュー日: 2003/05/22
投稿数: 2415
お住まい・勤務地: 恵比寿
投稿日時: 2005-05-14 01:06
画面１:ファイル名を入力
↓
画面2:ファイル名確認画面
↓(ファイルアップロード)
画面3:アップロード完了画面

ということでしょうか？
画面1をのぞいて考えれば、サーバからクライアント側の任意のファイルを取得できる仕組み、ということになります。やはりセキュリティ上できないと考えるのが妥当ではないでしょうか。
少なくとも JavaScript では難しいかと思います。
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2005-05-14 01:09
JavaScriptではActiveXと
最近流行のAjax(XMLHttp)を使用すれば可能だと思います。

テキスト表示とは何でしょうか。ファイルの内容でしょうか？

例えば、
・入力画面でアップロード
・ファイルをBase64でエンコードして確認画面のhiddenに突っ込む
・確認画面でサブミットされたhiddenの中身をデコード
・そのデコードされた内容をファイルに書き込み

って感じでもできそうな気がします。
ファイルがでかいと、無理がありますが。

他にも
・アップロード時に一時ファイルとして保存
・確認画面でOKの場合に、通常ファイルとしてリネームする

・サーバメンテもしくは、定時バッチなどで残ったゴミファイルを削除
・セッションに一時ファイル名を保存して、
　　タイムアウト・無効化時に残った一時ファイルを削除

って方法でもいいような気がします。


どの方法にしろ、スマートではないかもしれませんね。。。
未記入
会議室デビュー日: 2005/05/14
投稿数: 3
投稿日時: 2005-05-15 14:31
ご回答、ありがとうございます。

テキスト表示とは、確認画面で、アップロードのファイル名を表示したいと思っています。

アップロードするファイルは、かなり大きいので、ユーザーの待ち時間を考えると、
確認画面のＯＫの場合に、アップロードを開始しないと、ユーザに怒られてしまいます。

>JavaScriptではActiveXと
>最近流行のAjax(XMLHttp)を使用すれば可能だと思います。

付け焼刃で、調べてみました。
<script language="JScript">
function doPost()
{
var xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
xmlhttp.Open( "POST", "http://XXXXXXXXX", false );
xmlhttp.Send( document.upload.filename.value );
return xmlhttp.responseXML;
}
</script>
<html>
<body>
........
<form onSubmit="doPost()" name="upload"
<input type="text" name="fileName"....
<input type="text"....
<input type="submit"
</form>
........

今、環境が無い為、実際に行ってみれないのですが、
このような感じになるのでしょうか。
この場合、画面からのsubmitの送信と、XMLHttpの送信と、2回送信が行われるという事
になるのでしょうか。

すみません。よろしくお願いします。
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2005-05-15 16:03
それではファイル名が送信されるだけですね。
ActiveXでファイルシステムオブジェクトを取得して
ファイルを転送する必要がありますね。

JavaScriptのonSubmitイベントでファイルを別口で転送するのがベストでしょう。
未記入
会議室デビュー日: 2005/05/14
投稿数: 3
投稿日時: 2005-05-15 20:51
ご回答、ありがとうございます。

環境がなく、動かしていないのですが、
色々調べた結果の複合という形で、再度作ってみました。

<script language="JScript">
function createXMLHttpRequest() {
return this.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

function doPost()
{
var xmlhttp = createXMLHttpRequest();
xmlhttp.Open( "POST", "http://XXXXXXXXX", true );

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}

xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.Send( readFile(document.upload.filename.value) );
return xmlhttp.responseText;
}

function readFile(fname)
{
Fs = new ActiveXObject('Scripting.FileSystemObject');
if(Fs.FileExists(fname)){
Fo = Fs.OpenTextFile(fname,1,false);
str = Fo.ReadAll;
Fo.Close();
}
Fs = null;
return str;
}
</script>
<html>
<body>
........
<form onSubmit="doPost()" name="upload"
<input type="text" name="fileName"....
<input type="text"....
<input type="submit"
</form>
........

こういう感じですよね。
度々すみませんが、よろしく、お願いします。m(._.)m
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2005-05-15 20:54
とりあえず試してみて、駄目ならまた聞いてみてはいかがでしょうか。
1

スキルアップ／キャリアアップ（JOB@IT）