使用jquery和coldfusion cffile上传多个文件

不是一个问题…只是想在某处发布,因为我无法在其他地方找到它.现在我已经拼凑了一个工作演示,我想我会分享.这在Coldfusion和Railo CFML服务器上同样有效.

问题是,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’它可能与发送的内容不同)我还处理文件以创建缩略图并将其名称和路径发送回调用页面.在调用页面上,我可以显示缩略图.希望有人觉得这很有帮助.

解决方法

这是我对另一个用户遇到的类似问题的解决方案,我仍然使用HTML5“多个”属性来解决文件上传问题.您仍然可以像往常一样上传表单,这会将多个文件POST到服务器.您可以简单地循环表单数据并自行执行单独的写入,而不是使用CF的文件上载实用程序,从而在单个请求中为您提供对文件详细信息的完全服务器端控制.

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

使用jquery和coldfusion cffile上传多个文件

解决方法

相关文章