1

我一直在寻找一种优雅的方式来上传图片 AJAX 风格。我对这一切都很陌生,我找不到任何真正简单明了的东西来教我如何使用 CFC 和 jQuery 来做到这一点。Ray Camden 和其他人使用 Valum 的 AjaxUpload 插件(在此处找到)提供了一些很棒的东西,但它主要使用 CFM 来处理这些东西。所以,这里是我使用带有 jQ​​uery 和 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>

如前所述,我对此非常陌生,因此我对改进和修饰此代码的建设性方法持开放态度。

4

1 回答 1

0

这个:

          action: 'cfc/engine.cfc?method=uploadImage&returnFormat=json',

很复杂。我建议使用普通的 CFML 页面作为操作,并让它调用您的 CFC 并传入表单变量。这很好地将您的 CFC 与表单范围分离。

于 2010-10-05T20:47:55.877 回答