Utilisation de Valums AjaxUpload avec un CFC

Je cherchais un moyen élégant de télécharger des images de style AJAX. Je suis nouveau à tout cela, et je n'ai rien trouvé de vraiment simple et clair pour m'apprendre comment faire cela avec un CFC et un jQuery. Il y a de GRANDES choses de la part de Ray Camden et d'autres utilisant le plug-in AjaxUpload de Valum (found here) mais il utilisait principalement un CFM pour traiter le contenu. Donc, voici mon téléchargement de style AJAX incroyablement simple en utilisant un CFC avec jQuery et le plug-in AjaxUpload de Valum.Utilisation de Valums AjaxUpload avec un CFC

est ici la page (ne pas oublier votre 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>

Et le 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>

Comme mentionné précédemment, je suis incroyablement nouveau à ce donc je suis ouvert à façons constructives d'affiner et d'habiller ce code.

Source

2010-07-20 Ofeargall

Quelle est exactement votre question? Avez-vous des problèmes avec le plugin de téléchargement? Est-ce que votre code fonctionne? –

Mon code fonctionne en effet. J'ai posté ceci ici pour deux raisons. Premièrement, je n'ai pas trouvé beaucoup d'informations à l'aide du plugin AjaxUpload avec ColdFusion 8, alors j'ai pensé que je posterais mon code pour transmettre le peu que je sais. Deuxièmement, je recherche des commentaires constructifs de la part de ceux qui sont plus compétents. – Ofeargall

Ce:

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

est compliquée. Je suggérerais d'utiliser une simple page CFML comme action, et d'invoquer votre CFC et de transmettre les variables du formulaire. Ceci dissocie votre CFC de la portée du formulaire.

Source

2010-10-05 20:47:55

Utilisation de Valums AjaxUpload avec un CFC

Répondre

Questions connexes