Question

我一直在寻找一种优雅的方式来上传图像AJAX风格。我是你的新手，我找不到任何非常简单明了的东西来教我如何用CFC和jQuery做到这一点。 Ray Camden和其他人使用Valum的AjaxUpload插件（found here）有一些很棒的东西，但它主要使用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>

如上所述，我对此非常陌生，所以我愿意采用建设性的方式来改进和修饰这些代码。

Answer 1

此：

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

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

将Valums AjaxUpload与CFC一起使用

1 个答案: