我一直在寻找一种优雅的方式来上传图片 AJAX 风格。我对这一切都很陌生,我找不到任何真正简单明了的东西来教我如何使用 CFC 和 jQuery 来做到这一点。Ray Camden 和其他人使用 Valum 的 AjaxUpload 插件(在此处找到)提供了一些很棒的东西,但它主要使用 CFM 来处理这些东西。所以,这里是我使用带有 jQuery 和 Valum 的 AjaxUpload 插件的 CFC 的非常简单的 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>
如前所述,我对此非常陌生,因此我对改进和修饰此代码的建设性方法持开放态度。