JqueryとHTML5でajaxなファイルのアップロード
画面遷移無しでファイルのアップロードしようと思ったらiframeを使った技とかややこしい情報が色々出てきて、なかなかやりたいことに辿りつけなかったのでメモ。
やりたい事と条件
・ajaxなテキストファイルのアップロード
・テキストをRubyで編集して返す
・画面遷移せずに結果を表示
・IEは諦める。
必要最低限のコード
まずHTMLを用意
ajaxupload.html
`
<script type="text/javascript" src="ajaxupload.js" charset="utf8"></script><br>
`
つぎにjavascript
ajaxupload.js
`
$(function(){
$("#upload").click(function(){
var file = $("#file")[0].files[0];
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = showFile;
});
function showFile(event) {
$.ajax({
type: "POST",
url: "ajaxupload.rb",
data: { filedata:event.target.result}
}).done(function(msg) {
$("#output").html(msg);
});
}
});
`
んで何か処理をするRubyのスクリプト。ここではファイルの中身をそのまま返してるだけ。(パス名は適宜変更してください。)
ajaxupload.rb
`
#!P:\Dropbox\bin\RailsPortable\App\Rails\bin\ruby.exe require "cgi" cgi = CGI.new print "Content-Type: text/html\n\n" print cgi['filedata'][0]
`
デモ
サンプルを置いておきます。(さくらのレンタルサーバーはRubyの拡張子がrbではなくcgiじゃなくと動かなかったのでファイル名を変えています。
