Question

我有一个小表单，我想将文件上传到我的CF服务器。通过传统的操作页面提交我的CFFORM，我以前能够完成这项工作。但是我想用AJAX上传文件。

我在处理页面上收到错误如下：cffile action =“upload”要求表单使用enctype =“multipart / form-data”，即使我已经定义了我的表单。

从google'ng到处，我认为可能是因为Cffile要求filefield属性，但因为没有表格对象传递给coldfusion。 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>

Answer 1

正如评论中提到的@cfqueryparam，关键是javascript代码。特别是contentType和processData设置。操作页面可以用任何服务器端语言编写。

只是为了证明，example in this thread工作正常。至少在较新的浏览器中。除了将状态转储到div之外，我唯一改变的是输入名称。那是因为FILE是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">  <cfoutput>#serializeJSON(uploadResult)#</cfoutput>

使用AJAX和CFFILE上传文件

1 个答案: