django+jQuery Form Pluginでファイルアップロードしてみた

前回発見したjQuery Form Pluginを使って実際にファイルをアップロードするサンプルを作った。
http://d.hatena.ne.jp/piro_suke/20080615/1213498024

ファイルをアップロードする場合のみ、iframeが使用される関係でサーバ側から
返却するデータをtextareaタグで囲まないといけないことに気づかず、苦労した。

とりあえずこのサンプルがあればまた思い出して応用できるだろう。

アップロードフォームHTML

...
<script type="text/javascript" src="/static/javascripts/jquery/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/static/javascripts/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/static/javascripts/upload.js"></script>
<form id="upload-form" action="/image/upload/" method="POST" enctype="multipart/form-data">
<div>
<label>Title</label>
<span><input type="text" name="title" id="id_title" /></span>
</div>
<div>
<label>Image</label>
<span><input type="file" name="image" id="id_image" /></span>
</div>
<div><input type="submit" id="upload-btn" value="Upload" /></div>
</form>
...

フォーム送信用Javascript(upload.js)

$(document).ready(function() {
$("#upload-form").ajaxForm({
dataType: "json",
success: function (data) {
if (data.errors) {
var err_list = "";
for (var i in data.errors) {
err_list += data.errors[i] + "\n";
}
if (err_list.length > 0) {
alert("Error\n" + err_list);
}
return;
}
alert(data.message);
},
error: function (xml, status, e) {
alert("Server Error:" + e);
}
});
});

django側処理（views.py）
Photoクラスはアップロードした画像用のModelクラス。
PhotoAddFormは画像アップロード用のModelFormクラス。

from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.http import HttpResponseRedirect, HttpResponse
from django.utils import simplejson
from django.utils import encoding
from verdjnlib.fields import PhotoField, CROP, FIT
from testapp.main.models import *
from testapp.main.forms import *
@login_required
def photo_upload(request):
json_data = ""
res = {}
if request.method == "POST":
form = PhotoAddForm(request.POST, request.FILES)
if form.is_valid():
form_data = form.cleaned_data
photo = Photo()
photo.user = request.user
photo.image = request.FILES["image"]["filename"]
photo.name = form_data["name"]
photo.save_image_file(photo.image, PhotoField.resize(request.FILES["image"]["content"], 500, 500, FIT))
photo.save()
res = {"status": "success", "message": "photo saved"}
else:
error_list = []
for field in form:
if field.errors:
error_list.append(field.label + ":" + field.errors.as_text())
res = {"status": "error", "message": "form not valid.", "errors": error_list}
else:
res = {"status": "error", "message": "forbidden method."}
try:
json_data = simplejson.dumps(res, ensure_ascii=False)
except Exception,e:
print e
# For iframe(needed for ajax file upload)
res_data = "<textarea>%s</textarea>" % (json_data)
return HttpResponse(res_data, mimetype="text/html; charset=UTF-8")