使用AJAX和CFFILE上傳文件

我有一個小型表單，我想將文件上傳到我的CF服務器。通過傳統的操作頁面提交我的CFFORM，我可以在過去完成這項工作。不過，我想用AJAX上傳文件。使用AJAX和CFFILE上傳文件

我收到我的處理頁面上的錯誤，如下所示：即使我已經定義了我的表單，cffile action =「upload」要求使用enctype =「multipart/form-data」的表單。

從谷歌周圍，我認爲這可能是因爲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>

來源

2014-11-06 Brian Fleishman

也許這將幫助你http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with- jquery-ajax – 2014-11-06 17:11:59

你應該在查詢中使用'cfqueryparam'。絕不信任用戶提供的數據。 – 2014-11-06 17:12:13

是的，當然，正如斯科特所說。使用標籤'cfqueryparam'。所需要的只是一個惡作劇的提交來銷燬大量有價值的工作和數據。將查詢的值行更改爲'VALUES（，）注意缺少單引號。 'cf_sql_type'指示它們的存在。但是，這對您遇到的問題沒有影響，只是停止SQL注入。在每個查詢中使用'CFQUERYPARAM'來表示每個'＃variable＃'。 – 2014-11-06 17:18:00

正如在評論中提到@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"> 
<!--- Quick and dirty response dump for DEV/Debugging only ---> 
<cfoutput>#serializeJSON(uploadResult)#</cfoutput>

來源

2014-11-06 21:46:15 Leigh

感謝這個例子。我也注意到了這一點，並將字段名稱更改爲上傳。 – 2014-11-06 23:02:47

使用AJAX和CFFILE上傳文件

回答

相關問題