使用Valums AjaxUpload與CFC

我正在尋找一種上傳圖片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>

如前面提到的，我是令人難以置信的新本，所以我開提煉和修飾這些代碼的建設性方法。

來源

2010-07-20 Ofeargall

你的問題到底是什麼？您是否遇到上傳插件的問題？你的代碼是否工作？ – 2010-07-21 02:30:01

我的代碼確實有效。我發佈這裏有兩個原因。首先，我無法使用ColdFusion 8的AjaxUpload插件找到很多信息，所以我想我會發布我的代碼來傳遞我知道的知識。其次，我正在尋求那些更有見識的人的建設性反饋。 – Ofeargall 2010-07-27 15:04:29

此：

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

是複雜的。我建議使用一個普通的CFML頁面作爲動作，並讓它調用你的CFC並傳入表單變量。這很好地將您的CFC從表單範圍中分離出來。

來源

2010-10-05 20:47:55

使用Valums AjaxUpload與CFC

回答

相關問題