文件上传后的 JSON 回调答案

【问题标题】：JSON callback after file upload文件上传后的 JSON 回调
【发布时间】：2013-04-15 17:50:16
【问题描述】：

我在尝试通过 json/ajax 上传文件时遇到问题，并且文件看起来不像已上传。控制台输出中仅显示文件名。

我的html代码如下图。

<form action="/cgi-bin/upload.cgi" method="post" enctype="multipart/form-data" target="upIFrame"> 

<input type="file" id="uploadFileName" name="uploadFileName" size="30" >&nbsp;                                                                                                                                                                                                                                                                                                          
<input type="button" id="upgradeFile" name="upgradeFile" value="Upload" onclick="ul.load()" />
<iframe id="upIFrame" name="upIFrame" src="#" style="display: none;"></iframe>
</form>

ul.load() 在下面调用这一行，最终 transfer.ajax 代码将调用

transfer.ajax({
               url:'upload.cgi', 
               data:{filename: ul.filename}, 
               success: success, 
               error: error, 
               async: true 
});

ul.filename 来自uploadFileName

以及如下所示的transfer.ajax代码

transfer = {
ajax: function(p) {        
if (p.url.indexOf('/') == -1) {
  p.url = '/cgi-bin/' + p.url;
}
p.type = 'POST';
p.contentType = 'application/json';  
p.dataType = 'json';
p.cache = false;

if (p.data != undefined) {
    p.data = JSON.stringify(p.data);
}

$.ajax(p);
}
};

在 Fire Fox 中查看后的结果是 JSON

filename   "file.tgz"

来源

{"filename":"file.tgz"}

谁能告诉我我做错了什么或错过了什么？

TIA

我将代码修改为以下...

var fd = new FormData();
fd.append("filename",ul.filename);
$.ajax({
  url: "/cgi-bin/test.cgi",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false,   // tell jQuery not to set contentType
  beforeSend : function(xhr){                           
xhr.setRequestHeader('Content-Disposition', 'form-data; name=\"uploadFileName\"; filename=\"' + ul.filename + '\"');
},

});

Fire Fox 中的请求标头为

Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Disposition form-data; name="uploadFileName"; filename="test.tgz"
Content-Length  157
Content-Type    multipart/form-data; boundary=---------------------------20025277823050
X-Requested-With    XMLHttpRequest

但“帖子”显示以下内容

来源 --------------20025277823050 内容处置：表单数据；名称=“文件名”

test.tgz --------------20025277823050--

如何包含 filename="test.tgz"？缺少什么？

TIA

【问题讨论】：

没什么特别的。只需调用 CGI 处理文件上传并返回是否成功
你刚刚上传了文件名，要上传一个实际的文件，你必须使用类似FormData
我还需要为onbeforesend函数添加xhr.setRequestHeader('Content-Disposition'...)吗？
我不太确定你在问什么，但我会继续说不。
我将代码修改为以下...

标签： ajax json upload

【解决方案1】：

你可以试试这个，

var fd = new FormData(); fd.append("filename",ul.filename);`在此输入代码` $.ajax({ url: "/cgi-bin/test.cgi", 类型：“发布”，数据：fd，处理数据：假，内容类型：假，发送前：函数（xhr）{ xhr.setRequestHeader('Content-Disposition', 'form-data; name=\"' + ul.filename + '\"; filename=\"' + ul.filename + '\"'); } });

我认为 name 属性应该作为文件名。谢谢:)。

【讨论】：