Как отправить файл ввода с помощью JQuery? - PullRequest
4 голосов
/ 26 августа 2010

У меня есть форма, которая содержит 3 файла input.i я хочу отправить ее через jquery.i попробовал сериализовать функцию в jquery, но я понял, что эта функция не отправляет входные файлы!Форма:

<form id="submit_pics" action="#" >

     file 1 : <input name="file1" id="file1" type="file" /><br />
     file 2 : <input name="file2" id="file2" type="file" /><br />
     file 3 : <input name="file3" id="file3" type="file" /><br />

     <br />
     <div>
         <a id="submit" href="javascript:;" ><img  src="uploads/images/button1.png" /></a>
     </div>

</form>

и это мой код JavaScript:

<script type="text/javascript">

    $(document).ready(function(){

        $("#level3").click(function(event) {

            var str = $("#submit_pics").serialize(); 
            $.ajax({
                type: "POST",
                url: "track.php",
                data: str, 
                success: function(theResponse) {

                                        $('#req_result').html(theResponse);

                                    }

                return false;   
        });

    });

Ответы [ 5 ]

7 голосов
/ 25 марта 2015

После некоторых исследований я обнаружил, что вы можете сделать это с помощью:

$.ajax({
    url: 'track.php',
    type: 'POST',
    data: new FormData($("#submit_pics")[0]),
    processData: false,
    contentType: false
}).

Я Java-программист (Liferay) и на сервере я использую это для получения файла:

UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(request);
File File1 = uploadRequest.getFile("file1");
File File2 = uploadRequest.getFile("file2");

Я полагаю, что нечто подобное существует в php.

5 голосов
/ 26 августа 2010

К сожалению, вы не можете загружать файлы через XMLHttpRequest.На самом деле AJAX не отправляет формы на сервер, он отправляет выбранные данные в виде запроса POST или GET.Javascript не способен захватывать файл с компьютера пользователя и отправлять его на сервер

. Вы можете использовать хитрый обходной путь, отправляя (без AJAX) запрос на скрытый iframe.

Имеетевзгляд на это учебник

0 голосов
/ 30 августа 2018

У меня этот код работает

 _private.saveFile=function(){
      var formElement = $("#formId")[0];
      var _params = new FormData(formElement),
          _url = $(formElement).attr("action");

      _private.postFile(_url,_params,function(data,error){ 
           console.log(data);
           console.log(error);
      });
 }


_private.postFile=function(_urlService,_parameters,callback){
    var _url= _public.getPath()+_urlService;
    _private.httpPostFile(_url,callback,_parameters);
};

_private.httpPostFile=function(_url,callback,_data){

    $.ajax({
        url: _url,
        type: 'POST',
        data: _data,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success: function (data, textStatus, jqXHR) {
            callback(data,null);
        },
        error: function(xhr, status, error) {
            console.log('error ',error);
            console.log('status ',status);
            console.log('xhr ',xhr);
            callback(null,error);
        }
    });
}
0 голосов
/ 26 августа 2010

Вы не можете сделать это через $.ajax(), но вы можете использовать этот плагин загрузки .

0 голосов
/ 26 августа 2010

Вам стоит взглянуть на JQuery Form Plugin .При этом вы можете легко программно отправить любую имеющуюся форму.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...