Отправка HTML-формы с AJAX, которая включает в себя ввод файла

Question

Можете ли вы отправить через AJAX форму с вводом типа файла? Я пытаюсь использовать jquery для этого, но кажется, что он не может сериализовать отправляемый файл. Это что-то, что блокируется браузером из соображений безопасности? Есть ли способ обойти это?

Answer 1

Вы можете использовать File API, часть HTML5, чтобы сделать это:

http://www.html5rocks.com/tutorials/file/dndfiles/

Для обсуждения публикации сообщений вы можете начать с

http://groups.google.com/group/play-framework/browse_thread/thread/6223a9b25b87a839/6c74eda4f7b33010

По сути, используя File API, javascript может читать файлы из локальной системы, если браузер поддерживает это, а затем вы можете просто опубликовать это с помощью вызова ajax вместе со всем, что вам нужно отправить.

Если вам нужно отправить несколько файлов, это может быть хорошей отправной точкой:

http://robertnyman.com/2010/04/22/using-the-file-api-for-reading-file-information-multiple-file-uploads-another-sister-specification-to-html5/

Если вы должны использовать jQuery, то вы можете попробовать этот плагин, хотя я никогда не использовал его:

http://plugins.jquery.com/blueimp-file-upload-jquery-ui/

Answer 2

Я отказался от Скотта Харвелла, не дав должного объяснения, почему я проголосовал. Я понизил голосование, потому что это МОЖЕТ быть сделано, и я делаю это последовательно. Мой код выглядит следующим образом:

HTML-тег:

 <form id="inputForm1" method="POST" enctype="multipart/form-data" ACTION="">
    <div id="file-attachment">
        <div style="float:left;">file:</div>
        <div id="file-sub" style="float:left;">
            <input type="file" id="WebAccessFile" name="WebAccessFile" size="45" value="">
        </div>
    </div>
 </form>

ключ enctype="multipart/form-data"

Мой оператор jQuery ajax выглядит следующим образом:

$.ajaxFileUpload({url:'/LonApps/FoxWeb.exe/EWI/ewiprocedures?Proc=addrelease',
    secureuri: false,
    fileElementId:'WebAccessFile',
    dataType: 'text'
});

Я использую Visual FoxPro в качестве языка кодирования для этой функции, поэтому я опубликую свой код VFP, но вы можете просто адаптировать этот код к тому языку кодирования, который вы используете:

 loAttachment = Request.FormFieldObject("WebAccessFile")
 lcReleaseMessage = loAttachment.FileName
 lcSaveFile = ""
 IF loAttachment.ContentLength > 0
    lcFileName = loAttachment.FileName
    lcFileContent = loAttachment.Value()
    lcSaveFile = "D:\Website\Publish\Depts\EWI\docs\" + lcFileName
    SET SAFETY OFF 
    STRTOFILE(lcFileContent, lcSaveFile)
    SET SAFETY ON 
    lcHTTPSaveFile = "/Publish/Depts/EWI/docs/" + lcFileName
 ENDIF

Получает входное значение в виде loAttachment (lo обозначает Local Object). Затем, среди прочего, он обнаруживает, превышает ли длина содержимого вложения 0, если это так, то сохраняет вложение в локальном веб-каталоге для последующего доступа.

Answer 3

Технический ответ - нет, но есть «хаки» для отправки вашей формы на скрытый iFrame, чтобы он выглядел так, как будто это Ajax. Поиск в Google должен дать много примеров.

Answer 4

Взгляните на плагин AJAX Upload .