Загрузите несколько файлов с помощью jquery и coldfusion cffile

Не совсем вопрос... Просто хотел опубликовать это где-нибудь, потому что я не мог найти его где-то еще. Теперь, когда я собрал рабочую демонстрацию, я решил поделиться. Это одинаково хорошо работает на серверах 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' он может отличаться от того, что было отправлено) Я также обрабатываю файл для создания эскиза и отправьте его имя и путь обратно на страницу вызова. Таким образом, на странице вызова я могу отобразить миниатюру. Надеюсь, кто-то найдет это полезным.

Источник

2 ответа

Решение

Вот мое решение аналогичной проблемы, возникшей у другого пользователя, которую я решил, все еще используя HTML5-атрибут "множественный" для загрузки файлов. Вы по-прежнему можете загрузить форму, как обычно, что бы отправить несколько файлов на сервер. Вместо того, чтобы использовать утилиты загрузки файлов CF, вы можете просто зацикливать данные формы и делать отдельные записи самостоятельно, предоставляя вам полный серверный контроль над деталями файла в одном запросе.

Обработка HTML5 в ColdFusion ;

Источник

Я бы посоветовал вам опубликовать их как dataUrl, если у вас есть возможность отправлять несколько строк одновременно. На самом деле вам не нужна форма для публикации изображений в виде строк данных. Недавно я работал над проектом, где мне пришлось использовать angularjs для создания загрузки файла. Если вам даже не нужно использовать форму. Вы можете отправить его в виде массива dataURL и просмотреть их в вашем cfc. В качестве альтернативы вы можете использовать библиотеку, такую ​​как jquery uploadify или что-то подобное, если проблема заключается в обратной совместимости. Если вас интересует, как настроить циклический просмотр DataURL и сохранить их, поскольку они являются изображениями, я опубликую код.

Источник
Другие вопросы по тегам