用jquery和coldfusion cffile上傳多個文件

不是一個問題...只是想發佈這個地方，因爲我找不到它在別處。現在我已經拼湊了一個我認爲我會分享的工作演示。這在Coldfusion和Railo CFML服務器上同樣適用。用jquery和coldfusion cffile上傳多個文件

問題是，對於CFML開發人員來說，CFFILE不能與<input type="file" multiple>一起工作......傳統上，如果您想上傳3個文件並在後端使用CFFILE，則必須在您的調用中包含3個單獨的文件輸入頁。

這是我的解決方案，爲簡單起見，它使用Jquery $ .ajax對CFFILE進行多次調用，並將結果返回給調用頁面上的div。我確定有一個更好的方法來做到這一點，我的代碼可能是一個完整的黑客，但下面的例子工作。希望這可以幫助某人。

multiFileUpload.cfm 

<!DOCTYPE html> 
<CFPARAM Name="URL.contractID" defualt=""> 
<head> 
<title>Multi File Upload</title> 
<script> 
$(document).ready(function() { 
     $('#submitFrm').on("click", function(e){ 
     e.preventDefault(); 

      //The jquery.each() statement loops through all the files selected by user 
    $.each($('#multiFile')[0].files, function(i, file) { 
      var data = new FormData(); 
       data.append('file-0', file); 
      ajaxUpload(data); 
      }); //end .each statement  

     }); //end submitFrm's click function 

     function ajaxUpload(data){ 
     console.log("ajaxUpload function called"); 
     $.ajax({url: "multiFileUploadAction.cfm", 
     data: data, 
     cache: false, 
     contentType: false, //this is need for this to work with coldfusion 
     processData: false, //this is need for this to work with coldfusion 
     type: 'POST', 
     success: function(returnData){ 
      console.log(returnData); 
          //here is where you would update your calling 
          //page if successfull 
          $("#msgDiv").html($("#msgDiv").html() + "<p>" + returnData + "</p>"); 
      }, 
     error: function(returnData){ 
       console.log(returnData); 
       } 
    }); //end .ajax call 
    } //end ajaxUpload function 
}); //end onDocument ready 
</script> 
<style> 

</style> 
</head> 
<body> 
<form action="multiFileUploadAction.cfm" Method="POST" enctype="multipart/form-data" class="well" id="multiFileFrm"> 
<input type="file" name="multiFile" id="multiFile" multiple /> 
<button class="btn btn-primary" id="submitFrm" >Submit</button> 
<cfoutput> 
    <input type="hidden" Name="contractID" id="contractID" value="#URL.contractID#"> 
</cfoutput> 
</form> 
<div id="msgDiv" style="display:none;"></div> 
</body> 
</html>

這是我等待處理網頁...再次精簡到最低限度： multiFileUploadAction.cfm

<CFOUTPUT> 
<CFTRY> 
<cffile action="upload" 
      filefield="file-0" 
      destination="#expandpath("\images")#" 
      nameConflict="makeUnique"> 
    <cfcatch> 
    #cfcatch.Message# 
</cfcatch> 
</cftry> 
    <cfcontent reset="true" />Uploaded #cffile.serverFile# 
</CFOUTPUT> 
<!--- 
<cfdump var="#form#"> 
--->

完蛋了......在我的生產代碼我創建一個包含JSON響應保存的文件名和文件路徑（因爲'makeUnique'可能不同於發送的內容）我還處理文件以創建縮略圖並將其名稱和路徑發送回調用頁面。在呼叫頁面上，我可以顯示縮略圖。希望有人認爲這有幫助。

來源

2013-10-02 Koreys

這是更多的問答網站。我甚至不確定在帖子的任何位置是否看到[問題]（http://stackoverflow.com/help/on-topic）。 –

我從來沒有需要嘗試它，但Adobe文檔不支持此帖子的第二段http://help.adobe.com/zh_CN/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7388.html –

要防止被關閉，也許會重新作爲一個問題，然後張貼上述答案。這是一個很好的信息，讓學生關注這個話題會比較令人羞恥，比尊重有用的內容更重視遵守規則。 –

這是我解決其他用戶遇到的類似問題的解決方案，我仍然使用HTML5「multiple」屬性進行文件上傳。您仍然可以像平常一樣上傳表單，這會將多個文件發佈到服務器。您不必使用CF的文件上傳實用程序，只需循環訪問表單數據並自行完成單個寫入操作，即可在單個請求中完全控制文件詳細信息。

ColdFusion handling of HTML5 <input type="file" multiple="multiple" />

來源

2014-09-22 18:44:58

我的建議是將它們作爲dataUrl發佈，如果您有能力一次發送多個字符串作爲您的帖子。您實際上不需要表單就可以將圖像作爲數據字符串發佈。我最近在一個項目上工作，我不得不使用angularjs來創建文件上傳。如果你甚至不需要使用表單。你可以將它作爲一個dataURL數組發送並在你的cfc中循環。另外，如果向後兼容性是一個問題，你可以使用像jquery uploadify之類的庫。如果你對如何在DataURL中設置循環並保存它們感興趣，我會發布代碼。

來源

2013-10-22 16:57:22 Jesse

用jquery和coldfusion cffile上傳多個文件

回答

相關問題