обрабатывать html5 formupload (файл) - PullRequest
0 голосов
/ 17 октября 2011

У меня 3 проблемы (!) При использовании "очень простой" формы загрузки файла. Я постараюсь объяснить в ближайшее время: -):

1.) При отправке файла на сервер script-location, как указано в action = "" Я НЕ хочу открывать новое окно! Но на самом деле, когда я представляю пустое окно apperas. Так что сейчас я открываю его с target = "_ blank". Есть ли способ сказать "Просто сделайте свое действие, отправьте данные в скрипт, но НЕ открывайте окно или контент?" или "закрыть пустое окно как только ты его открыл: -)?

2.) Вы знаете способ отправки полей заголовка http с помощью формы, как с ajax? мне нужно отправить подтверждение

3.) Какое событие (html5 new?) Вы бы предложили использовать для выполнения ПОСЛЕ того, как данные были успешно отправлены (в ajax я всегда использую "Завершение или успех события, есть ли что-то подобное для форм?)

: confused: спасибо за ваши предложения

<form id="uploaddata" enctype="multipart/form-data" method="post" action="/cgi-bin/send/?auth='+sessionStorage.logindata+'" target="_blank">
<input type="hidden" name="folder" value="'+PATH+'" />
<input id="file" type="file" class="choosefile" max="999" min="1" name="attach" filename="" accept="">
<input type="button" id="formupload" class="submitupload" value="Upload">
<input type="submit"  class="submitupload button" value="Upload">                                         
</form>

1 Ответ

1 голос
/ 17 октября 2011

Без использования AJAX вы потеряете много своих реквизитов с этой формой.

Используя AJAX, вы можете: 1. предотвратить всплывающее окно 2. добавьте свои дополнительные заголовки 3. есть событие

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

Таким образом, вы можете позаботиться о проблемах 1 и 3 на стороне сервера, отправив обратно другую веб-страницу, содержащую нужные действия.

Задача 2: вы можете отправить как строку запроса, используя метод GET вместо метода post, хотя они не будут заголовками, вы можете использовать скрытые поля формы, но в большинстве случаев это менее чем желательно. Кроме того, используя сообщение, все в форме отправляется с пакетом на сервер и может быть прочитано, но опять же не в заголовках.

Я бы предложил просто использовать AJAX для решения ваших проблем, поскольку из-за его асинхронного и настраиваемого характера это, кажется, хорошо подходит для вашей проблемы.

EDIT: Как вы спросили о функциональности iframe, вот информация о форме:

<form id="fileAPITesting" action="startStopResume.aspx" method="POST" target="upload_target" enctype="multipart/form-data" encoding="multipart/form-data">    
      <input type="file" id="fileInput"  name="fileInput"  />
      <button id="submit" type="submit" >Submit</button>  
    </form>
<iframe id="upload_target" name="upload_target" src="#" style="display:none;"></iframe>

Это автоматически перенаправит функции записи в iframe. Затем вы можете добавить код (здесь я использую jQuery для упрощения), чтобы предотвратить это и использовать ваш AJAX:

<script type="text/javascript">
        $('#fileAPITesting').bind('submit', function(e){
            e.preventDefault();         
            fileProcessing(document.getElementById('fileInput'));       
        });
        setStatusArea();        
    </script>

Здесь плагин jQuery Form становится очень удобным. Также стоит отметить, что если вы ссылаетесь на репозиторий кода Google для jQuery, есть большая вероятность, что вы не добавите накладные расходы на свою страницу, так как многие другие страницы используют jQuery, и это будет в кеше пользователя. Вот ссылка на эту страницу:

http://plugins.jquery.com/project/form

У меня есть множество других требований к моей форме, но вот пример моей серверной страницы:

function fileProcessing(fileToProcess){ 
    // grab file information only allows 1 file at a time
    // In IE have to grab differently
    if(window.File){
        file = fileToProcess.files[0];
        clearForm(false);
        if (file){
            fileLength = file.size;
            fileName = file.name;
            totalBLObs = Math.ceil((fileLength / BYTES_PER_CHUNK));         
            initialInformation();
            $('#stop').toggle();
            hideButtons();
            $('#pause').toggle();
            fileSending();
        }else{
            statusField('No file selected');
        }
    }else{
        // without a the file API we have to submit the entire form to an iframe
        file = fileToProcess;
        clearForm(false);
        fileAPI = false;
        time = new Date();      
        if(file.value){
            // IE cannot get a proper handle on the information
            hideButtons();
            fileName = file.value;
            fileName = fileName.substr(fileName.lastIndexOf('\\') + 1);
            statusField('<br />The File API is not implemented.' + 
                '<br />Attempting alternate method with only start & stop status' + 
                '<br />Started at: ' + time.toLocaleTimeString());          
            $('#fileAPITesting').ajaxSubmit({

                beforeSubmit: function(a,f,o) {
                    o.dataType = 'string';                  
                    try{                        
                        $('#uploadOutput').html('<img src="images/loaderb64.gif"' +  
                            'alt="loading" /><br />Submitting...');
                        $('#uploadOutput').show();
                    }catch(e){
                        statusField('<br />Submitting...');
                    }
                },
                success: function(data) {           
                    if (typeof data == 'object' && data.nodeType)
                        data = elementToString(data.documentElement, true);
                    else if (typeof data == 'object')
                        data = objToString(data);
                    time = new Date();
                    statusField('<br />'+ data + ' at ' + time.toLocaleTimeString());
                    try{
                        $('#progress').hide();
                        $('#progress').html('');
                    }catch(e){
                        // #progress doesn't exist
                    }
                }
            });
        }else{
            statusField('No file selected');
        }
    }   
};

Надеюсь, что вы начнете идти по правильному пути.

...