Tell me why the file can not be transferred to the server?

<form action="" enctype="multipart/form-data" accept="image/*"> <div class="col-md-offset-1 col-md-5"> <input type="text" name="name" placeholder="Имя" requered><br> <input type="text" name="phone" placeholder="Телефон" requered><br> <input type="text" name="email" placeholder="E-mail"><br> <textarea id="" cols="30" rows="10" placeholder="Комментарий" name="text-comments"></textarea> <input type="file" name="file"><br> <input id="form-action" type="button" class="send" value="Купить в один клик"><br> </div> </form> $(document).ready(function(){ $(document).on("click","#form-action", function(event){ event.preventDefault(); if($("input[name='fio']").val()!="" && $("textarea").val()!=""){ var data = $("form").serialize(); $.post("/ajax/handler.php",{data},function(data,status){ console.log(data); $(".block_error").html("<div class='col-md-offset-1 text-left'><span style='color:#f29400'>Ваше сообщение отправленно.</span></div>"); //location.reload(); }); } else { $(".block_error").html("<div class='col-md-offset-1 text-left'><span style='color:red'>Заполните обязательные поля</span></div>"); } }) });

2 answers 2

I wrote such a crutch version here, I will be glad if somebody optimizes it

 $(document).ready(function(){ $(document).on("click","#form-action", function(event){ event.preventDefault(); file = new FormData(); file.append( 'file', $('input[type=file]')[0].files[0] ); var data = $("form").serialize(); $.ajax({ type: "POST", processData: false, contentType: false, url: "/ajax/handler.php.php", data: file, }) .done(function( file ) { console.log(file) }); $.ajax({ type: "POST", url: "/ajax/handler.php.php", data: {data}, }) .done(function( data ) { console.log(data) }); }) });
  • one
    The FormData constructor allows FormData to accept fields from a form .... that is ... if the form has for example name="myform" , then you can write var formData = new FormData(document.forms.myform); or var formData = new FormData(document.forms[0]); ......... and then just add the file formData .append( 'file', $('input[type=file]')[0].files[0] ); and just stupid to send data: formData in a single request - Alexey Shimansky
  • one
    that is, in the end, something like pastebin.com/MdTXgeGC and no crutches - Alexey Shimansky

Forms with files cannot be submitted by Ajax. It seems to be related to security. In any case - it is impossible, fact. But there are solutions.

Part of the solutions before the Ajax form submission looks, if there are any file paths in it, and if there are any files in the file paths. And, if there is - the script submits the form neayaksovo.

An example of such a solution: turbolinks

Another part of the solutions when submitting the form creates an invisible iframe with it and submit it with the non-Axis method. As iframe is invisible, from the user’s side the form is submitted “as if” ayaksovo. The script, meanwhile, monitors the iframe, and when it receives a response from the server, the script inserts the contents of the iframe into the page, and the iframe deletes it.

An example of such a solution: jquery-iframe-transport

Another solution is AJAX sending files past the form. For example blueimp / jQuery-file-upload does this. In this case, the form should not have input for file selection, the files themselves will be uploaded regardless of the form.

  • files can be transferred through Ajax, but forms with files cannot be submitted - Vitaly Emelyantsev
  • @ChromeChrome, it's strange that you deleted your comment, my clarification has lost its meaning. You said that I was wrong, and you can not transfer files through Ajax. I clarified that it is possible, but it is impossible to submit forms with files. And he supplemented the answer with a decision on the transfer of files through AYAX regardless of the form. - Vitaly Emelyantsev