[解決済み] AJAXとjQueryでHTML5のファイルアップロードを使う

質問

確かに、Stack Overflowに似たような質問が転がっていますが、どれも私の要件を満たしていないようです。

私がやりたいと思っていることは次のとおりです。

• データ全体のフォームをアップロードし、その中の1つのピースが シングル ファイル
• Codeigniterのファイルアップロードライブラリで動作します。

ここまでは、すべて順調です。データは私が必要とするように私のデータベースに取得されます。しかし、私はAJAXポストによってフォームを送信したいと思います。

• Flash や iframe ソリューションではなく、ネイティブの HTML5 ファイル API を使用する。
• 好ましくは、低レベルの .ajax() jQuery メソッド

フィールドの値が変わったときにファイルを自動アップロードする方法は、純粋なjavascriptで想像できると思うのですが、jQueryのsubmitで一気にやってしまいたいのです。ファイルオブジェクト全体を渡す必要があるので、クエリ文字列を介して行うことは不可能だと思いますが、現時点ではどうすればよいか少し迷っています。

これは実現できるのでしょうか？

どのように解決するのですか？

難しいことではありません。まず FileReader インターフェイス .

そこで、フォームが送信されたときに、送信処理をキャッチして

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... <-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
    var result = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}

次に、サーバー側（つまりmyscript.php）です。

$data = $_POST['data'];
$fileName = $_POST['name'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

といった感じです。間違っているかもしれませんが（間違っていたら訂正してください）、これはファイルを次のような形で保存するはずです。 1287916771myPicture.jpg で /uploads/ をサーバ上で実行し、JSON変数で応答する( continueSubmission() 関数に) 応答し、サーバー上のファイル名を含む JSON 変数を返します。

チェックアウト fwrite() と jQuery.post() .

上記のページでは readAsBinaryString() , readAsDataUrl() そして readAsArrayBuffer() は、その他のニーズ（例：画像、動画など）に対応します。