关于jquery：使用AJAX和CFFILE上传文件

Uploading a file with AJAX and CFFILE

本问题已经有最佳答案，请猛点这里访问。

我有一个小表格，我想上传一个文件到我的CF服务器。我过去可以通过传统的操作页面提交我的CFForm来完成这项工作。但是，我希望使用Ajax来上传文件。

我在处理页面上收到一个错误，如下所示：cffile action="upload"要求表单使用enctype="multipart/form data"，即使我已经这样定义了表单。

从google'ng开始，我认为这可能是因为cffile需要filefield属性，但是没有表单对象传递给coldfusion。可能的类似问题。不过，我不太喜欢发布的解决方案。

不管怎样，我能避开这个错误吗？

这是我的Ajax：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<cfoutput>

$(function(){
//Add a new note to a link
$("##upload-file").submit(function(event){
// prevent native form submission here
event.preventDefault();
$.ajax({
type:"POST",
data: $('##upload-file').serialize(),
url:"actionpages/file_upload_action.cfm",
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function() {
PopulateFileUploadDiv();
$("##upload").val('');
$("##response").append("File successfully Uploaded." );
}
});
return false;
});
});

</cfoutput>

我的形式：

1
2
3
4
5
6
7
8

处理页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<cffile action="upload" filefield="upload" destination="c:\inetpub\wwwroot\ticket-uploads" accept="image/bmp, image/jpeg, image/jpg, image/tiff, image/gif, image/png, text/richtext, text/plain, text/css, text/html, text/xml, application/x-zip-compressed, application/xml, application/mspowerpoint, application/powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation , application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/x-mspowerpoint, application/octet-stream, application/pdf, application/rtf, application/msword, application/x-excel, application/zip, multipart/x-zip, audio/wav" nameconflict="makeunique">


<cfoutput>
<cfset Uploaded_File_Name = #cffile.ServerFile#>
</cfoutput>


<cfquery name="uploads" datasource="#datasource#">
insert into file_uploads (ticket_id, file_path)
values(#form.ticket_id#, '#Uploaded_File_Name#')
</cfquery>

相关讨论

在对上述cfqueryparam as"the，the key is the JavaScript代码。特别是，contentTypeand the processDatasettings。can be written in the action页面任何服务器端语言。P＞＜／

demonstrate just to the example，this工厂在线程结束。至少在newer browsers。from the to a)div倾销的地位，唯一的输入是changed the name。that is because is keyword在CF的文件。P＞＜／

上传P＞＜／

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
<head>
Image Upload Form
<script src="//code.jquery.com/jquery-1.9.1.js">
<script type="text/javascript">
function submitForm() {
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
$.ajax({
url:"action.cfm",
type:"POST",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( response ) {
// display response in DIV
$("#output").html( response.toString());
})
.fail(function(jqXHR, textStatus, errorMessage) {
// display error in DIV
$("#output").html(errorMessage);
})
return false;
}

</head>

<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label>
<input type="file" name="upload" required />
<input type="submit" value="Upload" />
</form>

</body>
</html>

action.cfmP＞＜／

1
2
3
4
5
6

<cffile action="upload" filefield="upload"
destination="c:/temp/"
nameconflict="makeunique"
result="uploadResult">

<cfoutput>#serializeJSON(uploadResult)#</cfoutput>