2010-07-20 64 views
1

我正在寻找一种上传图片AJAX样式的优雅方式。我对所有这些想法都是陌生的,我找不到任何真正简单明了的东西来教会我如何使用CFC和jQuery来做到这一点。 Ray Camden和其他人使用Valum的AjaxUpload插件(found here)有一些非常棒的东西,但它主要使用CFM来处理这些东西。所以,这里是我使用带有jQuery和Valum的AjaxUpload插件的CFC的令人难以置信的骨骼AJAX样式上传。使用Valums AjaxUpload与CFC

这里的页面(不要忘记你的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> 

如前面提到的,我是令人难以置信的新本,所以我开提炼和修饰这些代码的建设性方法。

+0

你的问题到底是什么?您是否遇到上传插件的问题?你的代码是否工作? – 2010-07-21 02:30:01

+0

我的代码确实有效。我发布这里有两个原因。首先,我无法使用ColdFusion 8的AjaxUpload插件找到很多信息,所以我想我会发布我的代码来传递我知道的知识。其次,我正在寻求那些更有见识的人的建设性反馈。 – Ofeargall 2010-07-27 15:04:29

回答

0

此:

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

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