将 Valums AjaxUpload 与 CFC 结合使用
我一直在寻找一种优雅的方式来上传 AJAX 风格的图像。请注意，我对这一切都很陌生，我找不到任何真正简单明了的东西来教我如何使用 CFC 和 jQuery 来做到这一点。 Ray Camden 和其他人使用 Valum 的 AjaxUpload 插件提供了一些很棒的东西（在这里找到) 但它主要使用 CFM 来处理这些东西。所以，这是我使用带有 jQuery 的 CFC 和 Valum 的 AjaxUpload 插件实现的令人难以置信的 AJAX 风格上传。
这是页面（不要忘记您的 DTD）：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload.js" type="text/javascript"></script>
<title>AJAX Upload Test</title>
<script type="text/javascript">
$(document).ready(function() {
// Begin document.ready function //
// Fire up Valum's AjaxUpload
new AjaxUpload('upload_button', {
// Since I'm using a cfc I put the method and returnFormat in the string so CF knows to return json
action: 'cfc/engine.cfc?method=uploadImage&returnFormat=json',
// the default name...
name: 'userFile',
// Tell us to expect json in return
responseType: 'json',
// When teh upload is done, populate the preview with the file we just uploaded
onComplete: function(file, response) {
$('img#preview').attr('src', response.PREVIEW);
// Use this console.log to see exactly how the cfc is returning the json data
// then delete it before deploying to your production server
console.log(response);
}
});
// End of document.ready function //
});
</script>
</head>
<body>
<!-- no form needed as the plug-in essentially puts an invisible form field over the top of whatever you want... -->
<div id="upload_button">Upload</div>
<!-- This is where the image will be displayed when the CFC sends the details back to teh onComplete function -->
<!-- You'll likely want to hide this or populate it with a default image to start with -->
<img src="" id="preview" alt="The Preview" />
</body>
</html>
CFC：
<!--- Your destination directory --->
<cfset destdir = expandPath("../holding")>
<!--- Your function --->
<cffunction name="uploadImage" access="remote" output="false" returntype="struct">
<!--- if you're on CF8, be sure to set output to false. --->
<!--- Capture the file from the form --->
<cfargument name="userFile">
<!--- Upload the file to a directory --->
<!--- CAUTION please be aware that you would normally do a bunch of validation here to make sure it's an image --->
<!--- and you should probably upload the file to a directory outside your webroot! --->
<cffile action="upload" filefield="userFile" destination="#destdir#" nameconflict="makeunique" result="result">
<!--- Now you've got the file, create a copy here and resize it then pass that new name to the .preview variable --->
<!--- More Processing code here... --->
<!--- Now, create a struct for CF to return to your function on the page. This is a great place to put all --->
<!--- that image info you'll need to save the image name to the database for further use --->
<cfset uploadReturn=structnew()>
<!--- use the console.log in your onComplete jquery function to see this information --->
<!--- thanks Raymond Camden for your help here! --->
<cfset uploadReturn.newfile=#destdir# & "/" & result.serverfile>
<cfset uploadReturn.preview="holding/" & result.serverfile>
<cfset uploadreturn.name="Put something great here...">
<!--- This is the name of the struct being returned to the function as json --->
<cfreturn uploadReturn>
</cffunction>
正如前面提到的，我对此非常陌生，所以我愿意以建设性的方式改进和修饰这段代码。
I was looking for an elegant way to upload images AJAX style. I'm new to all this mind you, and I couldn't find anything really simple and clear to teach me how to do this with a CFC and jQuery. There are some GREAT things out there from Ray Camden and others using Valum's AjaxUpload plug-in (found here) but it was mostly using a CFM to process the stuff. So, here is my incredibly bare bones AJAX style upload using a CFC with jQuery and Valum's AjaxUpload plug-in.
Here's the page (don't forget your DTD):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload.js" type="text/javascript"></script>
<title>AJAX Upload Test</title>
<script type="text/javascript">
$(document).ready(function() {
// Begin document.ready function //
// Fire up Valum's AjaxUpload
new AjaxUpload('upload_button', {
// Since I'm using a cfc I put the method and returnFormat in the string so CF knows to return json
action: 'cfc/engine.cfc?method=uploadImage&returnFormat=json',
// the default name...
name: 'userFile',
// Tell us to expect json in return
responseType: 'json',
// When teh upload is done, populate the preview with the file we just uploaded
onComplete: function(file, response) {
$('img#preview').attr('src', response.PREVIEW);
// Use this console.log to see exactly how the cfc is returning the json data
// then delete it before deploying to your production server
console.log(response);
}
});
// End of document.ready function //
});
</script>
</head>
<body>
<!-- no form needed as the plug-in essentially puts an invisible form field over the top of whatever you want... -->
<div id="upload_button">Upload</div>
<!-- This is where the image will be displayed when the CFC sends the details back to teh onComplete function -->
<!-- You'll likely want to hide this or populate it with a default image to start with -->
<img src="" id="preview" alt="The Preview" />
</body>
</html>
And the CFC:
<!--- Your destination directory --->
<cfset destdir = expandPath("../holding")>
<!--- Your function --->
<cffunction name="uploadImage" access="remote" output="false" returntype="struct">
<!--- if you're on CF8, be sure to set output to false. --->
<!--- Capture the file from the form --->
<cfargument name="userFile">
<!--- Upload the file to a directory --->
<!--- CAUTION please be aware that you would normally do a bunch of validation here to make sure it's an image --->
<!--- and you should probably upload the file to a directory outside your webroot! --->
<cffile action="upload" filefield="userFile" destination="#destdir#" nameconflict="makeunique" result="result">
<!--- Now you've got the file, create a copy here and resize it then pass that new name to the .preview variable --->
<!--- More Processing code here... --->
<!--- Now, create a struct for CF to return to your function on the page. This is a great place to put all --->
<!--- that image info you'll need to save the image name to the database for further use --->
<cfset uploadReturn=structnew()>
<!--- use the console.log in your onComplete jquery function to see this information --->
<!--- thanks Raymond Camden for your help here! --->
<cfset uploadReturn.newfile=#destdir# & "/" & result.serverfile>
<cfset uploadReturn.preview="holding/" & result.serverfile>
<cfset uploadreturn.name="Put something great here...">
<!--- This is the name of the struct being returned to the function as json --->
<cfreturn uploadReturn>
</cffunction>
As aforementioned, I'm incredibly new to this so I'm open to constructive ways of refining and dressing up this code.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这：
很复杂。
我建议使用普通 CFML 页面作为操作，并让它调用 CFC 并传入表单变量。
这可以很好地将 CFC 与表单范围分离。
This:
is complicated.
I'd suggest using a plain CFML page as the action, and have it invoke your CFC and pass in the form variables.
This decouples your CFC from the form scope nicely.