9

本当に質問ではありません...他の場所で見つけることができなかったので、これをどこかに投稿したかっただけです. 動作するデモをまとめたので、共有したいと思います。これは、Coldfusion および Railo CFML サーバーでも同様に機能します。

問題は、CFML 開発者にとって CFFILE が機能しないこと<input type="file" multiple>です... 従来、3 つのファイルをアップロードしてバックエンドで CFFILE を使用する場合、呼び出しページに 3 つの個別のファイル入力を含める必要がありました。

簡単にするために削った私のソリューションを次に示します。Jquery $.ajax を使用して CFFILE を複数回呼び出し、結果を呼び出しページの div に返します。これを行うためのより良い方法があると確信しており、私のコードはおそらく完全なハックですが、以下の例は機能します。これが誰かに役立つことを願っています。

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>

これは私の処理ページです... ここでも最小限の要素を取り除いています: 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#">
--->

それだけです...私の本番コードでは、保存されたファイル名とファイルへのパスを含むJSON応答を作成します（「makeUnique」のため、送信されたものとは異なる可能性があります）また、ファイルを処理してサムネイルを作成しますその名前とパスを呼び出しページに送り返します。そうすれば、呼び出しページでサムネイルを表示できます。誰かがこれが役立つことを願っています。

4

2 に答える 2

1

ファイルのアップロードにHTML5の「複数」属性を引き続き使用して解決した、別のユーザーが抱えていた同様の問題に対する私の解決策を次に示します。サーバーに複数のファイルを POST する通常の方法でフォームをアップロードすることもできます。CF のファイル アップロード ユーティリティを使用するのではなく、フォーム データをループして個々の書き込みを自分で行うだけで、単一の要求でファイルの詳細をサーバー側で完全に制御できます。

HTML5 <input type="file" multiple="multiple" /> の ColdFusion 処理

于 2014-09-22T18:44:58.363 に答える
0

投稿用に一度に複数の文字列を送信できる場合は、dataUrl として投稿することをお勧めします。実際には、画像をデータ文字列として投稿するためのフォームはまったく必要ありません。私は最近、angularjs を使用してファイルのアップロードを作成する必要があるプロジェクトに取り組みました。フォームを使用する必要さえない場合。これを dataURL の配列として送信し、cfc でループすることができます。または、下位互換性が問題になる場合は、jquery uploadify などのライブラリを使用できます。DataURL をループして保存する方法に興味がある場合は、それらが画像であるため、コードを投稿します。

于 2013-10-22T16:57:22.883 に答える