Form Submit To Upload File And Also Other Fields Using Ajax June 06, 2024 Post a Comment I have tested every question here and have also googled alot, but did not find the something that work. Here is my HTML: Solution 1: I would use FormData for this task.Here is an example of your code using FormData :$(function () { //On dom ready: $("#createform").submit(function (e) { //will be triggered on submit: e.preventDefault(); if( window.FormData !== undefined ) //make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3 gecko mobile > 2, opera mobile >12 <- wil support XHR too { var formData = newFormData($('#createform')[0]); // use "[0]" <- important// you can append aditional values (regular text): formData.append("be","some value"); $.ajax({ url: 'index/create/createcontrols.php', //Server script to process datatype: 'POST', data: formData, xhr: function() { }, success: function(response){ $("#createformresults").text("SUCCESS"); }, error: function (jqXHR, textStatus, errorThrown) { $("#createformresults").text(errorThrown); }, //Options to tell jQuery not to process data or worry about content-type.cache: false, contentType: false, processData: false }); } else { //Fallback } returnfalse; }); }); CopyFormData will support multi file upload!Add to your Form tag the attribute: enctype="multipart/form-data" NOTE: You may find that the $_FILES array is empty on server side page - In this case you need to make sure your server configuration allows file uploads, size limit of file upload is enough, post time is enough etc....The best way to begin is to make sure that file uploads is allowed and then testing with very small files to be sure everything in your code is OK.Solution 2: Finally it is done!!Add this source to x.htmlBaca JugaUnwanted Scaling On Mobile DevicesBad Quality For 100% Both Width And Height Of CanvasWhy Inline And Inline-block Have Different Height With The Same Text Content//Program a custom submit function for the form $("form#data").submit(function(event){ //disable the default form submission event.preventDefault(); //grab all form data var formData = newFormData($(this)[0]); $.ajax({ url: 'formprocessing.php', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); } }); returnfalse; }); Copy<formid="data"><inputtype="hidden"name="id"value="123"readonly="readonly"> User Name: <inputtype="text"name="username"value=""><br /> Profile Image: <inputname="profileImg[]"type="file" /><br /> Display Image: <inputname="displayImg[]"type="file" /><br /><inputtype="submit"value="Submit"></form>CopyAnd this to a PHP file (formprocessing.php):$id = $_POST['id'];$username = $_POST['username'];$profileImg = $_FILES['profileImg'];$displayImg = $_FILES['displayImg'];CopyI did it with the help this link http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajaxSolution 3: ajax doesn't support file uploading at all. However, there are work-arounds. One of them is a jQuery plugin called Iframe Post Form, read more from:http://plugins.jquery.com/iframe-post-form/ $('form').iframePostForm({ complete : function (response) { $('#createarea').text("SUCCESS"); } }); CopyApparently, you will have to specify the url action and enctype="multipart/form-data" in the form tag.Hope this helps! Share You may like these postsMaterial-ui Formcontrollabel Whole Label Is Clickable Only Text Should BeWhy Won't This Slideshow WorkHow Do I Make A Function To Check If An Animation Passes A Certain PointInfo Box Similar To Google Image Search Results Post a Comment for "Form Submit To Upload File And Also Other Fields Using Ajax"
Post a Comment for "Form Submit To Upload File And Also Other Fields Using Ajax"