Non proprio una domanda ... Volevo solo postare questo da qualche parte perché non riuscivo a trovarlo altrove. Ora che ho messo insieme una demo funzionante pensavo di condividere. Funziona altrettanto bene con i server Coldfusion e Railo CFML.Carica più file con jquery e coldfusion cffile
Il problema è che per gli sviluppatori CFML è che CFFILE non funziona con <input type="file" multiple> ... tradizionalmente se si desidera caricare 3 file e utilizzare CFFILE sul back-end si dovrebbero includere 3 ingressi di file separati sulla propria chiamata pagina.
Ecco la mia soluzione ridotta per semplicità. Usa Jquery $ .ajax per effettuare diverse chiamate a CFFILE e restituisce i risultati a un div sulla pagina chiamante. Sono sicuro che c'è un modo migliore per farlo e il mio codice è probabilmente un hack completo ma l'esempio qui sotto funziona. Spero che questo aiuti qualcuno.
multiFileUpload.cfm
<!DOCTYPE html>
<CFPARAM Name="URL.contractID" defualt="">
<head>
<title>Multi File Upload</title>
<script>
$(document).ready(function() {
$('#submitFrm').on("click", function(e){
e.preventDefault();
//The jquery.each() statement loops through all the files selected by user
$.each($('#multiFile')[0].files, function(i, file) {
var data = new FormData();
data.append('file-0', file);
ajaxUpload(data);
}); //end .each statement
}); //end submitFrm's click function
function ajaxUpload(data){
console.log("ajaxUpload function called");
$.ajax({url: "multiFileUploadAction.cfm",
data: data,
cache: false,
contentType: false, //this is need for this to work with coldfusion
processData: false, //this is need for this to work with coldfusion
type: 'POST',
success: function(returnData){
console.log(returnData);
//here is where you would update your calling
//page if successfull
$("#msgDiv").html($("#msgDiv").html() + "<p>" + returnData + "</p>");
},
error: function(returnData){
console.log(returnData);
}
}); //end .ajax call
} //end ajaxUpload function
}); //end onDocument ready
</script>
<style>
</style>
</head>
<body>
<form action="multiFileUploadAction.cfm" Method="POST" enctype="multipart/form-data" class="well" id="multiFileFrm">
<input type="file" name="multiFile" id="multiFile" multiple />
<button class="btn btn-primary" id="submitFrm" >Submit</button>
<cfoutput>
<input type="hidden" Name="contractID" id="contractID" value="#URL.contractID#">
</cfoutput>
</form>
<div id="msgDiv" style="display:none;"></div>
</body>
</html>
Questa è la mia pagina procedando ... di nuovo ridotta al minimo: multiFileUploadAction.cfm
<CFOUTPUT>
<CFTRY>
<cffile action="upload"
filefield="file-0"
destination="#expandpath("\images")#"
nameConflict="makeUnique">
<cfcatch>
#cfcatch.Message#
</cfcatch>
</cftry>
<cfcontent reset="true" />Uploaded #cffile.serverFile#
</CFOUTPUT>
<!---
<cfdump var="#form#">
--->
Ecco fatto ... nel mio codice di produzione creo una risposta JSON che include il nome del file salvato e il percorso del file (a causa di "makeUnique" potrebbe essere diverso da quello che è stato inviato) Inoltre, elaboro il file per creare una miniatura e inviare il suo nome e percorso alla pagina chiamante. In questo modo sulla pagina chiamante posso visualizzare una miniatura. Spero che qualcuno lo trovi utile.
Questo è più di un Q & A del sito. Non sono nemmeno sicuro di vedere una [domanda] (http://stackoverflow.com/help/on-topic) ovunque nel tuo post. –
Non ho mai avuto bisogno di provarlo, ma il secondo paragrafo di questo post non è supportato dalla documentazione di adobe http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7388.html –
A evitare di essere chiuso, magari riformulare come una domanda, e quindi postare quanto sopra come risposta. Sono buone informazioni e sarebbe un peccato che i pedanti chiudessero l'argomento, ponendo più enfasi sulle seguenti regole che sul rispetto di contenuti utili. –