How to Do File Upload Using Jquery Serialization

how to do file upload using jquery serialization

A file cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript. One of the techniques to achieve this is to use hidden iframes. There's a nice jquery form plugin which allows you to AJAXify your forms and it supports file uploads as well. So using this plugin your code will simply look like this:

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

The plugin automatically takes care of subscribing to the submit event of the form, canceling the default submission, serializing the values, using the proper method and handle file upload fields, ...

How to add file value with jQuery serialize()

I want to send all the form input values using serialize() and add formData too

In this case serialize() won't help you, but there is a better way. Simply provide the form DOMElement to the FormData() constructor. Then all the data from the form fields (including the images) will be placed in to the FormData object. Try this:

var form_data = new FormData($('form')[0]);
$.ajax({
    type: 'POST',
    url: 'ajax/ajax-reg.php',
    data: form_data,
    processData: false,
    contentType: false,
    success: function() {
        // handle response here...
    }
});

Multiple file upload using jquery serialization works only at the second call

OK, I think I've figured this out. $('<input>').attr(...); sets the token attribute on a new <input> element. But this is after var formData = new FormData(this);, so the token doesn't get included in formData. Then I guess you get an authentication error, and I guess it does the authentication before it even gets to the PHP part. It would just be a HTTP401 response with no body, hence "". But then, on the second attempt, the <input> has already been created with the correct token, and this ends up being used to authenticate.

Input type file not getting serialized in jquery ajax

Try below code and make few changes in ajax code. Add below parameters in your code.

processData: false,
contentType: false,

And add var formData = new FormData($("#formID")[0]); line before ajax starts.

You should use FormData for uploading files using ajax. $(form).serialize() will give you just key and value. You can use below code for uploading files using AJAX.

var formData = new FormData($(form)[0]);
$.ajax({
    url: form.action,
    type: form.method,
    data: formData,
    processData: false,
    contentType: false,

    success: function (response) {

    }
});

Upload files using .Net 6 MVC model biding serialization by jQuery Ajax/JSON

1.Model Binding binds the property by name attribute, your parameter name here is imagemPro/imagemPre.

2.The jQuery serialize() method will not include input file elements. So file user selected is not going to be included in the serialized value.

You need create a FormData object, append the files to that then append the form field values as well to this same FormData object. You may simply loop through all the input field and add it.

Here is a whole working demo you could follow:

@model Produto
                                    //add `method="post"` in form tag
                                   //otherwise it will not generate token input
<form class="settings-form" id="frmAdd" enctype="multipart/form-data" method="post">
    <label for="setting-input-1" class="form-label">Título</label>
    <input asp-for="@Model.TituloProduto" type="text" class="form-control" required>
    <input asp-for="@Model.ImagemProduto"  type="file" class="form-control" required>

    <label for="setting-input-1" class="form-label">Premio</label>
    <input asp-for="@Model.TituloPremio" type="text" class="form-control" required>
    <input asp-for="@Model.ImagemPremio"  type="file" class="form-control" required>
                            
    <input type="button" value="Criar" class="btn app-btn-primary" id="btnAdd">
</form>     
            
@section scripts{
      @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
      <script src="~/admin/js/produtoAdd.js"></script>
}

JS:

<script>
        $(function () {
            $("#btnAdd").click(function (e) {
                e.preventDefault();
                var _this = $(this);
                var _form = _this.closest("form");   
                var isvalid = _form.valid();    
                if (isvalid) {
                    Create();
                }
                else {
                }
            });    
            Create = function () {
                var fdata = new FormData();   
                var fileInput1 = $('#ImagemProduto')[0];
                var file1 = fileInput1.files[0];
                fdata.append("imagemPro", file1); 
                
                var fileInput2 = $('#ImagemPremio')[0];
                var file2 = fileInput2.files[0];
                fdata.append("imagemPre", file2);    
                $("form input[type='text']").each(function (x, y) {
                    fdata.append($(y).attr("name"), $(y).val());
                });    
                var options = {};
                options.type = "POST";
                options.url = "/api/ProdutoAdd";
                options.dataType = "JSON";                    
                options.contentType = false;   //change here...
                options.processData= false;    //add this...
                options.data = fdata;    
                options.beforeSend = function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
                };    

                options.success = function (data) {
                };    
                options.error = function (res) {    
                };
                $.ajax(options);
            };
        });
    </script>

How to upload serialized image data in jquery/php?

At last I found and fixed the problem!

The problem was using data: 'data=' + imageData, for sending data by AJAX. I changed it to: data: {base64data : imageData}

$.ajax({
    url: 'index.php?route=common/filemanager/upload&user_token={{ user_token }}&directory={{ directory }}',
    type: 'post',
    dataType: 'json',
    data: {base64data : imageData},
    ...

Uploading image by AJAX, cannot use the serialize() method in jQuery?

Changing from serialize() to the following code works for me:

$('#imageUploadForm').submit(function(evt) {
                evt.preventDefault();

                var formData = new FormData(this);

                $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success: function(data) {
                    $('#imagedisplay').html("<img src=" + data.url + "" + data.name + ">");
                },
                error: function(data) {
                    $('#imagedisplay').html("<h2>this file type is not supported</h2>");
                }
                });
            });

How to serialize file upload field in Codeigniter?

Try this

$.ajax({
    url: actionUrl, 
    type: "POST",             
    data: new FormData(document.forms.form),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

Serialize file type jQuery

let me help you. I made this just 1 day ago. I have form including image field. when you submit it its uploading image via jquery.form.js

Note: I am uploading file with jqueryimageupload.php, if you want I can paste it. It is a simple php file upload. http://www.w3schools.com/php/php_file_upload.asp

html part:

<form name="imageform" id="imageform" action="jqueryimageupload.php" method="post">
  <input type="file" name="resim" id="img" onchange="ImageUpload()" />
  <input type="hidden" name="action" value="imageup" />
</form>

jquery:

function ImageUpload() {
    $("#return").show();
    $("#return").html('');
    $("#return").html('<img src="images/load2.gif" alt="Uploading...."/> wait, uploading...');
    $("#imageform").ajaxForm({
        target: '#return',
        success: function() {
            $("#return").fadeOut(10000);
        }
   }).submit();     
}

at last form submit:

$('#form').submit(function() {
    var img=$('#image').val();
    var forms=($(this).serialize());
    $.ajax({
        type:"POST",            
        url: "do.php?do=upload",
        data:forms+'&r='+encodeURIComponent(img),
        success: function(result){ //your code }     
    });
 });

---

Related Topics