jquery – AjaxForm和应用引擎blobstore

前端之家收集整理的这篇文章主要介绍了jquery – AjaxForm和应用引擎blobstore前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在 AjaxForm文件上传和应用程序引擎blobstore有一些困难。我怀疑困难是因为blobstore上传处理程序(blobstore_handlers.BlobstoreUploadHandler的子类)要求重定向响应,而不是返回任何内容,但我不确定。我期待得到一个XML文档来处理,并且似乎按预期的方式到达浏览器,但是我无法掌握它 – 下面的细节。

我的应用引擎blobstore上传处理程序如下 –

class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):
  def post(self):
    upload_files = self.get_uploads('file')  # 'file' is file upload field in the form
    blob_info = upload_files[0]

    entity_key = self.request.get("entityKey")

    // Update a datastore entity with the blobkey (not shown)

    // redirect to the uri for the updated entity
    self.redirect('%s.xml' % entity_key)

最终重定向是在我的应用程序中的uri返回一个xml文档。查看服务器输出,没有任何错误的指示 – 重定向被服务,并且按预期的方式返回xml文档,使用正确的mime类型,因此表单提交看起来不错,服务器对该提交的响应看起来好。

我的客户端代码使用ajaxForm看起来如下(对不起,它有点钝,我不认为问题在这里)

// Create the form
var dialogForm = $("<form method='POST' enctype='multipart/form-data'>")
   .append("<span>Upload File: </span><input type='file' name='file'/><br>")
   .append("<input type='hidden' name='entityKey' value='" + entityKey + "'/>")
   .append("<input type='hidden' name='entityField' value='image'/>")
   .append("<input type='button' value='Wait...' disabled='disabled'/>");;

dialogForm.ajaxForm();

// Turn the form button into a nice jQuery UI button and add a click handler
$("input[type=button]",dialogForm[0]).button()
   .click(function() {
      log.info("Posting to : " + dialogForm.attr('action'));
      dialogForm.ajaxSubmit({
         success: function(responseText,statusText,xhr,$form) {
            log.info("Response: " + responseText + ",statusText: " + statusText + ",xhr: " + goog.debug.expose(xhr) + ",form:" + goog.debug.expose($form));
         }
      });
    });

我在表单上设置“动作”(然后启用按钮)

$.get('/blob_upload_url',function(data) {
  dialogForm.attr("action",data);
  $("input[type=button]",dialogForm[0]).attr("value","Upload").button("option","disabled",false);
};

我在这里使用了一个小的google关闭以及记录和显示对象。一切看起来都很好 – 正如预期的那样,它正确地发布到服务器,并且成功函数调用。如果我在Chrome开发工具中看到文档结构,我可以看到简单地创建的iFrame来处理文件上传和响应。

问题是我从来没有在响应中获取xml文档。日志输出如下 –

[ 18.642s] [Panel] Response: null,statusText: success,xhr: 0 = [object HTMLFormElement]
length = 1
selector = 
jquery = 1.4.2,form:0 = [object HTMLFormElement]
length = 1
selector = 
jquery = 1.4.2
Resource interpreted as document but transferred with MIME type application/xml [ABCdefGH]

关于mime类型的chrome的投诉可能是超级相关的,但我没有做出连接:) – 至少这意味着它在某个时候获取xml文档。在Chrome资源视图中,您可以看到POST,响应是302重定向,然后后续的GET请求 – 其标题看起来很好 –

Request URL:http://localhost:8081/_ah/upload/ABCdefGH
Request Method:GET
Status Code:200 OK
Request Headers
Referer:http://localhost:8081/
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/533.4 (KHTML,like Gecko) Chrome/5.0.375.70 Safari/533.4
Response Headers
Cache-Control:no-cache
Content-Length:2325
Content-Type:application/xml
Date:Sun,20 Jun 2010 20:47:39 GMT
Expires:Fri,01 Jan 1990 00:00:00 GMT
Server:Development/1.0

Chrome资源视图不会向我显示该文档的内容(只是空白),但是firefox和xml文档看起来不错。 Firefox给出了相同的最终结果,但是对于ajaxSubmit()responseText,它们是null。

我想我只是在这个地方大脑褪色,但是真的让我陷入困境。任何获取该XML文档的指针都将是很棒的 – 欢呼声,

科林

解决方法

这是我使用的一种方法(仅在Chrome中测试)略有修改。它不是AjaxForm,但它的作品。
function upload_files(entityKey,files,url,progress_callback) {
  var xhr = new XMLHttpRequest(),formData = new FormData();
  xhr.upload['onprogress'] = progress_callback;

  formData.append('entityKey',entityKey);
  $.each(files,function(i,file) { formData.append('file[]',file);});

  xhr.open("post",true);
  xhr.setRequestHeader("Cache-Control","no-cache");
  xhr.send(formData);
}

entityKey可作为服务器上的参数使用。 ‘files’参数来自文件类型输入表单元素的’files’属性(作为支持多个数组的数组)。 ‘progress_callback’参数是一个函数,它接收一个具有(至少)’加载’和’总’字段(单位是字节)的对象。它不关心服务器响应。

猜你在找的jQuery相关文章