使用 jquery 和 Coldfusion cffile 上传多个文件-前端问题

Upload multiple files with jquery and coldfusion cffile(使用 jquery 和 Coldfusion cffile 上传多个文件)

本文介绍了使用 jquery 和 Coldfusion cffile 上传多个文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

不是一个真正的问题...只是想在某个地方发布这个，因为我在其他地方找不到它.现在我已经拼凑了一个我认为我会分享的工作演示.这同样适用于 Coldfusion 和 Railo CFML 服务器.

Not really a question... Just wanted to post this somewhere because I couldnt find it elsewhere. Now that I've cobbled together a working demo I thought i would share. This works equally well on Coldfusion and Railo CFML servers.

对于 CFML 开发人员来说，问题在于 CFFILE 不适用于 <input type="file" multiple> ...传统上，如果您想上传 3 个文件并在在后端，您必须在调用页面上包含 3 个单独的文件输入.

The problem is that for CFML developers is that CFFILE doesn't work with <input type="file" multiple> ... traditionally if you wanted to upload 3 files and use CFFILE on the back end you would have to include 3 separate file inputs on your calling page.

为了简单起见，这是我的解决方案.它使用 Jquery $.ajax 对 CFFILE 进行多次调用，并将结果返回到调用页面上的 div.我确信有更好的方法可以做到这一点，我的代码可能是一个完整的 hack，但下面的示例有效.希望这可以帮助某人.

Here is my solution shaved down for simplicity. It uses Jquery $.ajax to make several calls to CFFILE and returns the results to a div on the calling page. Im sure there is a better way to do this and my code is probably a complete hack but the below example works. Hope this helps someone.

multiFileUpload.cfm

<!DOCTYPE html>
<CFPARAM Name="URL.contractID" defualt="IiZndDsKJmx0O2hlYWQmZ3Q7CiZsdDt0aXRsZSZndDtNdWx0aSBGaWxlIFVwbG9hZCZsdDsvdGl0bGUmZ3Q7CiZsdDtzY3JpcHQmZ3Q7CiQoIGRvY3VtZW50ICkucmVhZHkoZnVuY3Rpb24oKSB7CiAgICAgICAkKA=="#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

This is my proccessing page... again stripped down to the bare minimum: 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"可能与发送的不同)我还将文件处理为创建一个缩略图并将其名称和路径发送回调用页面.这样在调用页面上我可以显示缩略图.希望有人觉得这很有帮助.

Thats it... in my production code i create a JSON response that includes the saved file name and path to the file (because of the 'makeUnique' it could be different then what was sent) I also process the file to create a thumbnail and send it's name and path back to the calling page. That way on the calling page I can display a thumbnail. Hope someone finds this helpful.

问题描述

推荐答案