What kind of work with the form that sends the data and photos is on the client? I can do the field validation and sending of data, but here's how to collect data from the field - I have a problem downloading the files that I need to write to js for this:

html: <form id="formModel"> <input type="text" name="name"> <input type="text" name="phone"> <input type="file" id="fileOne"> <input type="submit"> </form> js: $("#formModel").submit(function() { $.ajax({ url: "send.php", method: "POST", data: { name: $("#formModel input[name='name']").val(), phone: $("#formModel input[name='phone']").val(), file: $("#formModel #fileOne").val() }, success: function(data) { $("#formModel input[name='name']").val(''), $("#formModel input[name='phone']").val(''), $("#btnSubmit").attr("value", "Отправлено") } }); return false; });

2 answers 2

You can serialize the form data instead of collecting it for each field, at the same time it will simplify the loading of files. For example, use a FormData object that allows you to package data in the form of key-value pairs for sending using XMLHttpRequest asynchronously. Then the code will look like this:

 <form id="formModel"> <input type="text" name="name"> <input type="text" name="phone"> <input type="file" name="fileOne" id="fileOne"> <input type="submit"> </form> js: $("#formModel").submit(function() { $.ajax({ url: "send.php", method: "POST", data: new FormData( this ), success: function(data) { $("#formModel input[name='name']").val(''), $("#formModel input[name='phone']").val(''), $("#btnSubmit").attr("value", "Отправлено") } }); return false; });

    Here is the code from my old project, I hope it will help.

      var data = new FormData(); if (this.files[0]) { var image_file = this.files[0]; } data.append('upload', image_file); jQuery.ajax({ url: '/?ajax=upload_avatar', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data) { console.log("ajax success"); console.log(data); jQuery("#avatar_image").attr("src", data); } });