使用FormData上传blob,文件内容为空

时间:2013-11-20 18:17:02

标签: ajax webkit blob form-data

我正在尝试在Chrome上上传一个带有FormData的blob。 我正在构建一个Web应用程序。 用户可以创建简档并选择化身,其是img标签。 当我尝试执行ajax请求时,我使用图像构建一个画布并在其上调用toDataURL。 然后我使用此函数将数据转换为二进制内容

    dataURItoBlob: function(dataURI) {
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {type: 'application/octet-stream'});
    }

创建blob后,我将其添加到formData并发送ajax查询(使用jquery)。 问题是,文件的内容似乎是空的。

 ------WebKitFormBoundarysToAVAYMLPFfJF96
 Content-Disposition: form-data; name="image"; filename="avatar.png"
 Content-Type: application/octet-stream


 ------WebKitFormBoundarysToAVAYMLPFfJF96--

使用FileReader我在blob上执行readAsText,它实际上有内容:

 �PNG


 IHDR�
 IDATx^���������v�"�`���^[l��N�����׸�k�؁�X�B�[�i�eٜ����yg����E�dF����o~���{�s�sN(�˲�_t�ɤ����݇ns(Z�6ڇ>�O}}��b��l�����ks�̱��r�w�}��{��x<޲}�Q644XNN�;޷�~k7�|��z��V[[�����o�����rss��WTTXII�UWW[^^^��455Yqq���Ը��ߏ>���Xc
 ���s��o��Yg�ew�y�566��...

有没有人遇到过这个问题? 我只是不明白为什么查询发送一个空文件。

1 个答案:

答案 0 :(得分:6)

Chrome开发者工具实际上并未显示表单数据中的文件内容,请检查服务器端以查看该文件是否确实为空。 Firebug(一个firefox插件)向您显示文件数据的一部分,您还可以使用fiddler等工具查看http帖子正文。