用AJAX和CFFILE上传文件
用AJAX和CFFILE上传文件
提问于 2014-11-06 17:05:37
我有一个小表单，我想上传一个文件到我的CF服务器。过去，我通过一个传统的操作页面提交了我的CFFORM来完成这项工作。但是，我想使用AJAX来上传文件。
我在处理页面上收到了如下错误: cffile action="upload“要求表单使用enctype=”多部分/表单数据“，尽管我已经将表单定义为这样。
从google的周围，我认为它可能是因为Cffile请求filefield属性，但由于没有传递给coldfusion的form对象。Possible Similar Issue。不过，我不喜欢贴出的解决方案。
不管怎样，我能克服这个错误吗？
这里是我的AJAX：
<!---Script to upload file link --->
<cfoutput>
<script>
$(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;
});
});
</script>
</cfoutput>我的表格：
<form method="post" name="upload-file" id="upload-file" enctype="multipart/form-data">
<input tabindex="0" size="50" type="file" id="upload" name="upload" accept="image/bmp, image/jpg, image/jpeg, image/tiff, image/gif, image/png, text/richtext, text/plain, text/css, text/html, application/rtf, application/msword, application/x-excel, application/zip, multipart/x-zip, audio/wav" value="Upload an additional file" />
<br />
<input name="submitForm" id="submitForm" type="submit" value="Attach File To Ticket">
</form>处理页：
<!---File Upload Logic --->
<!---CFFile Tag located in template file --->
<!---CFFile code --->
<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">
<!---Retrieve Uploaded filename --->
<cfoutput>
<cfset Uploaded_File_Name = #cffile.ServerFile#>
</cfoutput>
<!--- Add file details to file_uploads table --->
<cfquery name="uploads" datasource="#datasource#">
insert into file_uploads (ticket_id, file_path)
values(#form.ticket_id#, '#Uploaded_File_Name#')
</cfquery>回答 1
Stack Overflow用户
发布于 2014-11-06 21:46:15
正如注释中提到的@cfqueryparam，关键是javascript代码。特别是contentType和processData设置。操作页可以用任何服务器端语言编写。
为了演示一下，example in this thread工作得很好。至少在较新的浏览器中。除了将状态转储到div之外，我唯一更改的是输入名称。这是因为文件是CF中的关键字。
上传
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<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;
}
</script>
</head>
<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label><br>
<input type="file" name="upload" required />
<input type="submit" value="Upload" />
</form>
<div id="output"></div>
</body>
</html>action.cfm
<cffile action="upload" filefield="upload"
destination="c:/temp/"
nameconflict="makeunique"
result="uploadResult">
<!--- Quick and dirty response dump for DEV/Debugging only --->
<cfoutput>#serializeJSON(uploadResult)#</cfoutput>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26785219
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号