これが mu uploadFile 関数です
function uploadFile(options){
var formData = new FormData();
formData.append(options.paramName, options.file);
if(options.data){
for(var k in options.data){
formData.append(k, options.data[k]);
}
}
sendRequest(formData, options.url);
function sendRequest(formData, url){
var xhr = new XMLHttpRequest();
// Set up events
xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.upload.addEventListener('load', onloadHandler, false);
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
// Set up request
xhr.open('POST', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
xhr.send(formData)
}
function onloadstartHandler(evt){
}
function onprogressHandler(evt){
}
function onloadHandler(evt){
}
function onreadystatechangeHandler(evt){
if(evt.target.readyState == 4){
var status = evt.target.status;
if(evt.target.responseText){
options.handler(evt.target);
}
}
}
}
このようなファイル入力の「変更」ハンドラから上記の関数を呼び出しています-
'change input#user_pic': function(ev){
var selfRef = this;
var fel = ev.currentTarget;
if(fel.files.length>0){
var file = fel.files[0];
uploadFile({
paramName: 'photo',
file: file,
url: '/'+eventRouter.eventId+'/photos/upload/',
handler: function(xhr){
if(xhr.status == '200'){
var img = $.parseJSON(xhr.responseText)['photo'];
selfRef.model.set({picture: img});
console.log('photo uploaded');
console.log(img);
}
}
});
}
}
Chrome では失敗と表示され、Firefox では中止と表示されます。エラーや例外は表示されません。リクエストが失敗する理由がわかりません。
これは、chrome n/w タブに表示されるものです
Request URL:http://localhost:8000/5/photos/upload/
Request Headersview source
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryg6rSLttylr9m2Yla
Origin:http://localhost:8000
Referer:http://localhost:8000/events/edit/5
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
X-CSRFToken:qTiEOg9wGFHxEtQV5EyW612DEh9qgooN
X-Requested-With:XMLHttpRequest
Request Payload
------WebKitFormBoundaryg6rSLttylr9m2Yla
Content-Disposition: form-data; name="photo"; filename="Koala.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryg6rSLttylr9m2Yla--
そして、それは単にステータスに失敗したと言っています。