• ベストアンサー

Ajaxでファイル中身をPOSTするには

Ajaxを使用してファイルをPOSTしようと思っています。 jQuery+AJAX Uploadを使ってのPOSTはできました。 ですが、受け手側(API)の仕様により、ファイルをPOSTするのではなく、 ファイルの内容をデータとして転送する必要があり困っています。 イメージとしては、multipart、--boundary--を使わないで input type="text" value="エンコードしたファイルの内容" でPOSTする感じのことをやりたいです。 JavaScriptでPOSTするファイルの内容を参照する方法 ご存知でしたら教えて下さい。 参考) AJAX Upload:http://valums.com/projects/ajax-upload/

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

> JavaScriptでPOSTするファイルの内容を参照する方法 > ご存知でしたら教えて下さい。 この方法はありませんが、 <input type="file">を使用していても、multipart/form-dataを使わなくても送信は可能です。 ファイルの中に&の文字が入っていると、そこでフォームフィールドの区切りと見なされますので、ファイルが分割されるかもしれません。 たとえば <input type="text" name="a" value="あいうえお"> <input type="text" name="b" value="かきくけこ"> これを送信すると a=あいうえお&b=かきくけこ というデータが送られます。 multipart/form-dataを使わずに、 <input type="file" name="a"> を使用して、 あいうえお&b=かきくけこ と書いたファイルを送信すると、 a=あいうえお&b=かきくけこ というデータが送られることになりますので、 「&b=かきくけこ」という部分は、aのファイルの一部なのか、 aのファイルとは別に<input type="text" name="b" value="かきくけこ">というフィールドから送られてきたものなのか、区別が付かなくなります。 それを区別できるようにするものがmultipart/form-dataです。 言い換えれば、 ファイルの中に&や=の文字がないこと、および、バイナリデータではないことを保証できるなら、 または、サーバー側で、a=以外の&や=の区切りを無視する設定にしてあれば、 multipart/form-dataを使わなくても正常に送信することは可能です。

dede_nd
質問者

補足

なるほど。そういった方法もあるのですね。勉強になります。 残念なことに今回はバイナリデータなので、分割された場合に順番がわからなくなりファイルが壊れるだろうと思われるので、諦めて代替処置で補うことにします。 また別の機会で必要になりましたら、是非試してみようと思います。 ありがとうございました。

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

JavaScriptはローカルなファイルにアクセスできない仕様なので無理です。 Windows IE 環境ならVbscript、Jscriptで可能かもしれません。 あるいは、人が対象ファイルを開いてtextareaに貼り付けするしかないですね、もっともバイナリーファイルなら事前に別途クライアント側でエンコードする必要がありますね。 それともPROXYとなる自分のCGIプログラムを作ってそこから変換してPOSTさせるとか

dede_nd
質問者

補足

やはり無理ですか…。 Ajaxで送信する際に、転送するファイル(データ)へアクセスできるかと思ったのですが、残念です。 CGIを使って1クッション置く方法はダメだった場合に考えているのですが 転送するファイルの容量が大きく、CGIのサーバ側でリミットを変更する必要があり、できれば…と思っています。 ありがとうございました。

関連するQ&A

  • JQueryのpostメソッドでファイルをアップロードする方法を教えてください

    以下の技術を使ってwebシステムを開発しています。 jquery 1.3.2 php 5.2.6 Apatch 2.2.10 システムにファイルをアップロードしたいのですが出来ません。 JQueryの$.post()メソッドを使ってアクションを呼び出しているのですが phpの$_FILESが取得できません。 方法をご教授ください。 JQuery、phpともに初心者です。 不足している情報があれば教えてください。 ソースや設定は以下です。 //// upload.html ///////////////////////////////// <html> <head> <title>upload</title> <script type="text/javascript" src="./jquery-1.3.2.min.js" ></script> <script type="text/javascript"> function execPost() { var params = $('#testform').serialize(); $.post( 'http://localhost:8080/upload", params, function(data) { // post後処理 }); } </script> </head> </body> <form name="testform" id="testform" enctype="multipart/form-data" method="post" > <input type="hidden" name="MAX_FILE_SIZE" value="10000" /> <input type="file" name="file" /> <input type="button" name="post" onclick="execPost()" /> </form> </body> </html> //// upload.php ////////////////////////////////// <?php $filename = $_FILES['file']['name'] ?> //// php.ini ///////////////////////////////////// ;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;; ; Whether to allow HTTP file uploads. file_uploads = On ; Temporary directory for HTTP uploaded files (will use system default if not ; specified). ;upload_tmp_dir = upload_tmp_dir = "/tmp" ; Maximum allowed size for uploaded files. upload_max_filesize = 2M

  • AJAX?のような使い方をしたい

    AJAX?のような使い方をしたいと思い、 javascriptで下記のような記述を行いました。 document.getElementById('id').innerHTML = "<script type='text/javascript' src='api'></script>"; あらかじめ<script type='text/javascript' src='api'></script>を記述しておけば、 正常にapiにリクエストしてくれますが、 無理やりjavascriptで書き換えると、ソースコードのみが書き換えられ、 apiにリスエスとしてくれません。 何か記述が間違っているのでしょうか? それとも根本的に間違っているのでしょうか?

  • ajaxでPHPにPOST送信して結果データをテキストファイルに書き込みたいのですがうまくいきません

    jQueryを使用しています。 <script language="Javascript"> function send(){// $.ajax({ type: "POST", url: "write.php",//write.phpに送信 date: {date: $("#text").val()},//「id="text"」なテキストエリアのvalue値を取得し「date」として送信。 }); } </script> <form name="chat" onsubmit="send();return false" method="POST" > <textarea id="text"></textarea><br> <input type="submit" value="送信"></input> </form> write.php <?php $textfile = fopen("text.txt", "a");//「text.txt」をオープン fputs($textfile, $_POST["date"]);//書き込む(これができません。ディレクトリーにファイルがなかった場合、ファイルは作成されます) fclose($textfile); ?> どのようにしたら、テキストエリアに入力された値を、テキストファイルに書き込むことができるのでしょうか? 色々、調べたのですがプログラムの書き方の間違いがどうしても分かりません。教えてください。

    • ベストアンサー
    • AJAX
  • PHPのフォームとAjaxを組み合わせたいのですが

    簡潔にコードを書かせて頂きますが、PHPとjQueryによるAjaxを連携させたいと考えています。 まずform.phpのフォームをsubmitし、その内容をpost.phpへ送り、リダイレクトにてres.phpへ送るという、PHPの基本的な動きをさせますが、 その結果はres.phpという新しいページではなく、Ajaxにてform.phpの<div id="text1">部に元々書かれている<form>ではなく、res.phpの出力内容を出力したいと考えております。 この場合、どのようにjQueryコードを記述すればいいのでしょうか? 色々考えて試してみたのですが、上手くいきませんでした。 自分はform.php、post.php、res.phpという3つのファイルを用意していますが、もしかしたらori.phpという出力用のファイルを用意し、その<div>空間内にform.phpのフォームやres.phpの結果をAjaxによって出力するのかなとも思いましたが、良く分かりませんでした。 アドバイス頂けないでしょうか? 宜しくお願い致しします。 (( form.php )) <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text1"> <h2>その1</h2> <form action="post.php" method="POST" id="form" name="form" > <input type="checkbox" id="news" name="news" value="news" /> ニュース <br /> <input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="reset" /> </form> </div> </body> </html> (( post.php )) <?php session_start(); session_regenerate_id(TRUE); $_SESSION["news"] = "news 表示"; $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'res.php'; header("Location: http://$host$uri/$extra"); (( res.php )) <?php session_start(); session_regenerate_id(TRUE); ?> <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text2"> <h2>その2</h2> <?php $_SESSION["news"]; ?> </div> </body> </html> <?php session_destroy(); $_SESSION = ''; ?>

    • ベストアンサー
    • PHP
  • POSTだとAjaxをループできない

    <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>Ajax</title> <script type="text/javascript"> <!-- function createXMLHttpRequest(cbFunc) { XMLhttpObject = new XMLHttpRequest(); if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc; return XMLhttpObject; } function func() { for (i=0; i<5; i++) { httpObj = createXMLHttpRequest(displayData); if (httpObj) { httpObj.open("GET","file_chk.php?chk=(ファイル名)",true); httpObj.send(null); //httpObj.open("POST","file_chk.php",true); //httpObj.send("chk=(ファイル名)"); } } } function displayData() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { alert(httpObj.responseText); } } // --> </script> </head> <body> <input type="button" value="Ajax" onclick="func();" /> </body> </html> 先の投稿と似たものになってしまいますが、以上のようなソースのプログラムを組みました。ボタンを押すとAjaxが作動してphpプログラムを呼び出し、その結果を返すというものです。phpプログラムは任意のファイル名を変数として受け取り、その存在の有無によって返事を返すというものです。ソースは以下の通りです。 <? $file = $_GET['chk']; //$file = $_POST['chk']; if (file_exists($file)) { print "true"; } else { print "false"; } ?> このAjaxで問い合わせるという処理全体をループさせたいのですが、コメントアウトしているPOSTで実行するとうまくいきません。1回しかアラートが出なかったり、5回と設定してるのにそれ以上出たり。当初これに悩まされてましたが、GETで試すとうまくいきました。なぜPOSTだとうまくいかなかったのでしょうか?自分なりに考えてみたのですが全く分かりません。ソースのもので試すときは一方のコメントアウトを外し、他方をコメントアウトさせていました。もちろんphpの方も同様です。 GETとPOSTで書いたソースは間違ってませんよね?同じ意味になってますよね?どちらの方法でもいいことはいいんですが、GETだと与えるクエリによっては行が横に長くなってしまいますし、sendがあるのならそこに変数を書いたほうが見やすいのではないかと思ってPOSTを使ってました。

  • フォームの一部のfileを送信

    上手に出来る方法をアドバイス下さい。 <form method="post" name="uploadForm" id="uploadForm" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_file" id="upload_file"> <input type="button" value="アップロード"> <input type="text" name="text2" id="text2"> <input type="submit" value="送信"> </form> のようなフォームで「アップロード」が押された場合、"upload_file"だけ送信したいのですが上手い方法があるでしょうか? また、「送信」が押された場合、"upload_file"以外を送信したいです。 「POST先で無視をする」以外でお願いします。

  • Dojo1.2でAjaxのpostをしたい

    こんにちは。 Dojo1.2でAjaxのPostをしているのですが、値が受けわたっていきません。 ファイルアップロードをしているのですが、Fileを認識しません。 確認はIE6で行ってます。 ・呼び出し元 var param = new Object(); param['file'] = document.edit._file.value; ajaxPost("test.action", param); ... <form name="edit" enctype="multipart/form-data" method="post"> <input type="file" name="file" id="_file" size="50" maxlength="255" value=""/> </form> ・Ajax呼び出し function ajaxPost( rurl, parameters) {  dojo.xhrPost ({   url: rurl, //form: 'post-form',   parameters: parameters,   load: function (data) {   },   error: function (error) {    alert(error);   }  }); } このようにしていますが、どこが悪いのでしょうか?できればform=editで指定できれば良いのですが・・、エラーとなってしまう為、parameterとして格納したつもりです。 Action内には到達しているのですが、Fileを認識できていない状態です。(フレームワークはwebwork2を使ってますが、省略しました) お分かりになりましたら、よろしくお願いします。

  • Ajax.Updaterでmultipart/form-dataの送信方法

    <html> <body> <form action="/hoge.cgi" method="POST" enctype="multipart/form-data" target="if"> arg1:<input type="textbox" name="arg1"/><br/> <input type="file" name="data" size="60"> <input type="submit" value="Upload" onclick="post()"/> </form> <iframe name="if" id="if" frameborder="0" border="0" width="730" height="500" scrolling="yes"></iframe> </body> </html> 上記と同じような事をiframeを使わないで実現したいです。 以下の様に書いてみました。 <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function post(){ var url ='/hoge.cgi'; new Ajax.Updater( $('result'), url, { method: 'POST', parameters: Form.serialize($("form1")), contentType: 'multipart/form-data' } ); } </script> </head> <body> <form id="form1" enctype="multipart/form-data"> arg1:<input type="textbox" name="arg1"/><br/> <input type="file" name="data" size="60"> <input type="button" value="Upload" onclick="post()"/> </form> <div id="result"></div> </body> しかし、/hoge.cgiには前者と同じようなhttpリクエストがわたりません。前者と同じような(下記(1)参照)httpリクエストを発行するにはどうしたらよいでしょうか? (1)前者:httpリクエストの例 POST /hoge.cgi HTTP/1.1 CONTENT_LENGTH: 285 CONTENT_TYPE: multipart/form-data; boundary=---------------------------7d8ea171f055c ~中略~ -----------------------------7d8ea171f055c Content-Disposition: form-data; name="arg1" -----------------------------7d8ea171f055c Content-Disposition: form-data; name="data"; filename="" Content-Type: application/octet-stream -----------------------------7d8ea171f055c-- (2)後者:httpリクエストの例 POST /hoge.cgi HTTP/1.1 CONTENT_LENGTH: 11 CONTENT_TYPE: multipart/form-data; charset=UTF-8 ~中略~ arg1=&data=

  • formの入れ子の回避方法

    アドバイス下さい。 <form method="post" name="addForm" id="addForm" action="aaa.php"> <input type="text" name="textA" id="textA"> <form method="post" name="uploadFormA" id="uploadFormA" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_fileA" id="upload_fileA"> <input type="button" value="アップロード"> </form> <form method="post" name="uploadFormB" id="uploadFormB" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text2" id="text2"> <input type="file" name="upload_fileB" id="upload_fileB"> <input type="button" value="アップロード"> </form> <form method="post" name="uploadFormC" id="uploadFormC" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text3" id="text3"> <input type="file" name="upload_fileC" id="upload_fileC"> <input type="button" value="アップロード"> </form> <input type="text" name="textB" id="textB"> <input type="submit" value="送信"> </form> のような、formが入れ子になってしまっているformがあります。 これを回避する方法を教えていただきたいです。 条件としては、 ・見た目はこの順番がいい。 ・javascript、CSS等なんでも良いです。 ・各「アップロード」ボタンで、text1,2,3,4、upload_fileA,B,C,Dを送信、「送信」ボタンでtextA,Bを送信したい。 以上、お願いいたします。

    • ベストアンサー
    • HTML
  • jQueryでajax

    ajax(jQuery使用)を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート(This is success!)が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目1</option> <option value="2">項目2</option> </select> <p>結果:</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX

専門家に質問してみよう