By Willy


2010-02-23 16:58:24 8 Comments

Can I use the following jQuery code to perform file upload using post method of an Ajax request ?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

If it is possible, do I need to fill "data" part? Is it the correct way? I only post the file to the server side.

I have been Googling around, but what I found was a plugin while in my plan I do not want to use it. At least for the moment.

22 comments

@Jay 2019-03-13 05:40:43

2019 update:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

js

$(document).on('submit', '.fr', function(){

    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;

    });

views.py

form = ThisForm(request.POST, request.FILES)

if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']

@dirkgroten 2019-03-13 16:23:23

How dow this improve any of the answers already given? Also this answer mentions a views.py file which is Django and has nothing to do with the question.

@Jay 2019-03-17 16:36:13

Because the issue manifests itself comparably while using Django, and if you're using Django, there isn't much direction here in regards to solving it. I thought I would offer pro-active assistance just in case anyone arrives here as I did in the future. Having a rough day?

@М.Б. 2018-12-21 21:39:44

Here's how I got this working:

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

JS

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'yourUrl';

    files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];


    // process your file

}

@ffgpga08 2019-01-18 17:00:01

What helped the most for me about this was the $('#file')[0].files[0] which is some sort of strange JS workaround without requiring a proper <form>

@Jayesh Paunikar 2017-06-09 10:48:23

var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
    url: 'url',
    type: 'POST',
    data: dataform,
    async: false,
    success: function(res) {
        response data;
    },
    cache: false,
    contentType: false,
    processData: false
});

@S.R 2017-06-09 11:08:22

you can improve your answer by adding some details

@vickisys 2015-01-19 12:36:33

Simple Upload Form

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>

@Brownman Revival 2015-02-24 02:44:23

sir what are the js that were used on this example is there a specific jquery plugin for this one..i have a question i was pointed here can you please check my question.. I want to upload multiple file or images in that project here is the link stackoverflow.com/questions/28644200/…

@machineaddict 2016-05-20 09:07:42

$(this)[0] is this

@FrenkyB 2017-10-27 09:02:08

What is the parameter on the server for posted file? Can you please post server part.

@dev_masta 2018-04-29 22:09:02

@FrenkyB and others - the files on the server (in PHP) are not stored in the $_POST variable - they are stored in the $_FILES variable. In this case, you would access it with $_FILES["csv"] because "csv" is the name attribute of the input tag.

@m13r 2019-02-07 08:45:29

simplest solution for me, thanks!

@Mike Volmar 2018-05-24 01:56:02

Using FormData is the way to go as indicated by many answers. here is a bit of code that works great for this purpose. I also agree with the comment of nesting ajax blocks to complete complex circumstances. By including e.PreventDefault(); in my experience makes the code more cross browser compatible.

    $('#UploadB1').click(function(e){        
    e.preventDefault();

    if (!fileupload.valid()) {
        return false;            
    }

    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);

    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");

    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 

    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");

            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});

@Mike Volmar 2018-05-24 01:57:12

this runs the form thru jquery validate ... if (!fileupload.valid()) { return false; }

@Ziinloader 2012-05-30 07:00:43

Iframes is no longer needed for uploading files through ajax. I've recently done it by myself. Check out these pages:

Using HTML5 file uploads with AJAX and jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Updated the answer and cleaned it up. Use the getSize function to check size or use getType function to check types. Added progressbar html and css code.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

How to use the Upload class

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

Progressbar html code

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Progressbar css code

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

@Ziinloader 2012-06-14 12:49:40

You can more or less copy the code straight off and use it. Just change some id names and class names. Any customation is on your own.

@awatts 2012-08-10 09:13:35

Note that myXhr seems to be global as well as name, size and type. Also it's better to use "beforeSend" to augment the already created XMLHttpRequest object rather than using "xhr" to create one then change it.

@C.M. 2012-10-23 19:05:12

Not supported by IE9: caniuse.com/#search=xhr

@tandrewnichols 2013-05-21 11:30:14

I don't think we can use that as is @Ziinloader. You're using some local method that's not included: writer(catchFile). What is writer()?

@stackular 2014-04-10 16:25:50

@tandrewnichols That's in the AJAX success event. This proof-of-concept code is fine. Just use what's in the DOM click event, write whatever you want in the success AJAX event, remove the use of global variables, etc. It needs some cleaning up, but it definitely works. Thanks, @Ziinloader

@raju 2014-04-29 18:33:30

What if the data also contains few fields along with file to upload?

@user428747 2015-04-16 16:50:59

It is not supported in IE 8 and IE9. The file object will have only name and it does not have size and type.

@Dennis98 2016-02-07 01:21:10

@user428747 That's known, but it's not the problem of this code, it's a technical limitation from IEs side (like always TBH). caniuse.com/#feat=xhr2

@navotera 2017-05-29 00:41:51

i want to check if uploading is finish but this code not work if(percent == 100) { progress_bar_id.fadeOut(); } please give some suggestion

@Ziinloader 2017-05-29 09:46:44

@navotera I would strongly recommend you to put ` var progress_bar_id = $("#progress-wrp"); progress_bar_id.fadeOut();` in your ajax success callback. It will automatically be called when the image is successfully uploaded! Tried it my self just a minute ago and it works like a charm!

@navotera 2017-05-29 23:37:11

thank it work. but i use this $(progress_bar_id).fadeOut(2000);

@Regular Joe 2017-10-10 21:39:35

@Ziinloader This is a tremendously useful example that I see you've come back to and maintained several times. Truly an answer worth much more than the one upvote I can give.

@StefansArya 2018-01-10 16:16:28

$(this)[0] is this

@jinglesthula 2018-08-23 15:55:19

In my case I added a .show() on the progress bar wrapper right before the ajax call, and a complete handler with a corresponding .hide(). Depending on your UI, this may reduce visual clutter when the upload isn't being interacted with.

@navotera 2018-10-21 12:15:41

i already pleased with this explanation... and i need to impove this... how can i add resize feature in this uploader ? already try this : stackoverflow.com/a/24756889/4004975 but unfortunately not works. thank for your suggestion @Ziinloader

@Ziinloader 2018-10-21 21:19:00

If it's only resize the image you want then I would suggest that you do it in the back-end code @navotera. If you really want to resize in front-end then check this link https://zocada.com/compress-resize-images-javascript-browser‌​/

@Nikit Barochiya 2017-03-17 04:50:43

<html>
    <head>
        <title>Ajax file upload</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>

@David 2016-10-20 06:38:42

To get all your form inputs, including the type="file" you need to use FormData object. you will be able to see the formData content in the debugger -> network ->Headers after you will submit the form.

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});

@VISHNU Radhakrishnan 2016-08-09 09:15:03

to upload a file which is submitted by user as a part of form using jquery please follow the below code :

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

Then send the form data object to server.

We can also append a File or Blob directly to the FormData object.

data.append("myfile", myBlob, "filename.txt");

@Nikunj K. 2016-08-02 10:55:07

If you want to upload file using AJAX here is code which you can use for file uploading.

$(document).ready(function() {
    var options = { 
                beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json' 
        }; 
    $('body').delegate('#image','change', function(){
        $('#upload').ajaxForm(options).submit();        
    }); 
});     
function showRequest(formData, jqForm, options) { 
    $("#validation-errors").hide().empty();
    $("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
    if(response.success == false)
    {
        var arr = response.errors;
        $.each(arr, function(index, value)
        {
            if (value.length != 0)
            {
                $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
         $("#output").html("<img src='"+response.file+"' />");
         $("#output").css('display','block');
    }
}

Here is the HTML for Upload the file

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
    <input type="file" name="image" id="image" /> 
</form>

@Daniel Nyamasyo 2016-07-19 05:36:11

I have handled these in a simple code. You can download a working demo from here

For your case, these very possible. I will take you step by step how you can upload a file to the server using AJAX jquery.

First let's us create an HTML file to add the following form file element as shown below.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Secondly create a jquery.js file and add the following code to handle our file submission to the server

    $("#formContent").submit(function(e){
        e.preventDefault();

    var formdata = new FormData(this);

        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

There you are done . View more

@lee8oi 2014-03-24 21:53:43

I'm pretty late for this but I was looking for an ajax based image uploading solution and the answer I was looking for was kinda scattered throughout this post. The solution I settled on involved the FormData object. I assembled a basic form of the code I put together. You can see it demonstrates how to add a custom field to the form with fd.append() as well as how to handle response data when the ajax request is done.

Upload html:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

In case you are working with php here's a way to handle the upload that includes making use of both of the custom fields demonstrated in the above html.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

@Brownman Revival 2015-02-21 11:07:30

i am getting Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, why is this so sir i copy paste your code as it is

@colincameron 2015-03-18 13:12:38

@HogRider - if you Google your error message, this is the first result: stackoverflow.com/questions/10752055/… Are you accessing your web pages locally through file://, rather than using a web server? As an aside, it is not best practice to simply copy-and-paste code blindly without first understanding it. I would recommend you go through the code line-by-line to gain an understanding of what is happening before putting the code to use.

@Brownman Revival 2015-03-19 01:45:29

@colincameron thank you for clarify a few things i did go through the it line by line and i dont really understand much so i asked the question so that someone might clarify my doubts. I am using local by way xampp to be exact. Can i ask a question that maybe you can clarify?

@Adarsh Mohan 2015-11-22 12:20:51

@Brownman Revival : I know that its too late for the reply.. You got a cross origin error because you opened the html file as file than running it from the server.

@Brownman Revival 2015-12-15 03:13:43

@AdarshMohan i appreaciate the reply how do you suggest i do it to make it right?

@Rayden Black 2015-12-16 02:14:36

How do I apply form action based on selection in this code?

@Adarsh Mohan 2015-12-16 03:07:06

u must open the html page from the server

@pedrozopayares 2014-07-24 16:28:42

Ajax post and upload file is possible. I'm using jQuery $.ajax function to load my files. I tried to use the XHR object but could not get results on the server side with PHP.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

As you can see, you must create a FormData object, empty or from (serialized? - $('#yourForm').serialize()) existing form, and then attach the input file.

Here is more information: - How to upload a file using jQuery.ajax and FormData - Uploading files via jQuery, object FormData is provided and no file name, GET request

For the PHP process you can use something like this:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

@Rayden Black 2015-12-16 02:21:51

What jquery library do i need to reference to run this code?

@pedrozopayares 2016-04-09 19:51:09

The answer was written in 2014. The version of JQuery was 1.10. I have not tried with more recent versions.

@Yakob Ubaidi 2016-08-05 09:52:55

formData.append('file', $('#file')[0].files[0]); returns undefined and console.log(formData) has nothing except _proto_

@CountMurphy 2017-01-10 15:40:43

Not supported by IE 9, in case some is stuck in the same hell as I

@TARKUS 2017-01-30 22:43:54

I got this to work...Pinch me, I'm on jQuery Ajax file upload heaven! var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });

@Rog 2017-09-30 02:50:09

Translations of error messages here : php.net/manual/en/features.file-upload.errors.php

@Raymond Wachaga 2017-11-21 05:55:10

The trick is setting the encryption type in the ajax call like so: enctype : 'multipart/form-data',

@Ted Bigham 2018-06-28 06:29:10

@RaymondWachaga That's encoding type, not encryption type. :)

@Maciej Krawczyk 2018-10-02 13:04:38

Should be the accepted answer, we are not in 2010 anymore...

@Ima 2014-12-23 11:05:27

I have implemented a multiple file select with instant preview and upload after removing unwanted files from preview via ajax.

Detailed documentation can be found here: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

    $(document).ready(function(){
    $('form').submit(function(ev){
        $('.overlay').show();
        $(window).scrollTop(0);
        return upload_images_selected(ev, ev.target);
    })
})
function add_new_file_uploader(addBtn) {
    var currentRow = $(addBtn).parent().parent();
    var newRow = $(currentRow).clone();
    $(newRow).find('.previewImage, .imagePreviewTable').hide();
    $(newRow).find('.removeButton').show();
    $(newRow).find('table.imagePreviewTable').find('tr').remove();
    $(newRow).find('input.multipleImageFileInput').val('');
    $(addBtn).parent().parent().parent().append(newRow);
}

function remove_file_uploader(removeBtn) {
    $(removeBtn).parent().parent().remove();
}

function show_image_preview(file_selector) {
    //files selected using current file selector
    var files = file_selector.files;
    //Container of image previews
    var imageContainer = $(file_selector).next('table.imagePreviewTable');
    //Number of images selected
    var number_of_images = files.length;
    //Build image preview row
    var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
        '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
        '</tr> ');
    //Add image preview row
    $(imageContainer).html(imagePreviewRow);
    if (number_of_images > 1) {
        for (var i =1; i<number_of_images; i++) {
            /**
             *Generate class name of the respective image container appending index of selected images, 
             *sothat we can match images selected and the one which is previewed
             */
            var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
            $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
            $(imageContainer).append(newImagePreviewRow);
        }
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        /**
         * Allow only images
         */
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
          continue;
        }

        /**
         * Create an image dom object dynamically
         */
        var img = document.createElement("img");

        /**
         * Get preview area of the image
         */
        var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');

        /**
         * Append preview of selected image to the corresponding container
         */
        preview.append(img); 

        /**
         * Set style of appended preview(Can be done via css also)
         */
        preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});

        /**
         * Initialize file reader
         */
        var reader = new FileReader();
        /**
         * Onload event of file reader assign target image to the preview
         */
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        /**
         * Initiate read
         */
        reader.readAsDataURL(file);
    }
    /**
     * Show preview
     */
    $(imageContainer).show();
}

function remove_selected_image(close_button)
{
    /**
     * Remove this image from preview
     */
    var imageIndex = $(close_button).attr('imageindex');
    $(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}

function upload_images_selected(event, formObj)
{
    event.preventDefault();
    //Get number of images
    var imageCount = $('.previewImage').length;
    //Get all multi select inputs
    var fileInputs = document.querySelectorAll('.multipleImageFileInput');
    //Url where the image is to be uploaded
    var url= "/upload-directory/";
    //Get number of inputs
    var number_of_inputs = $(fileInputs).length; 
    var inputCount = 0;

    //Iterate through each file selector input
    $(fileInputs).each(function(index, input){

        fileList = input.files;
        // Create a new FormData object.
        var formData = new FormData();
        //Extra parameters can be added to the form data object
        formData.append('bulk_upload', '1');
        formData.append('username', $('input[name="username"]').val());
        //Iterate throug each images selected by each file selector and find if the image is present in the preview
        for (var i = 0; i < fileList.length; i++) {
            if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
                var file = fileList[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
            }
        }
        // Set up the request.
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                if (jsonResponse.status == 1) {
                    $(jsonResponse.file_info).each(function(){
                        //Iterate through response and find data corresponding to each file uploaded
                        var uploaded_file_name = this.original;
                        var saved_file_name = this.target;
                        var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
                        file_info_container.append(file_name_input);

                        imageCount--;
                    })
                    //Decrement count of inputs to find all images selected by all multi select are uploaded
                    number_of_inputs--;
                    if(number_of_inputs == 0) {
                        //All images selected by each file selector is uploaded
                        //Do necessary acteion post upload
                        $('.overlay').hide();
                    }
                } else {
                    if (typeof jsonResponse.error_field_name != 'undefined') {
                        //Do appropriate error action
                    } else {
                        alert(jsonResponse.message);
                    }
                    $('.overlay').hide();
                    event.preventDefault();
                    return false;
                }
            } else {
                /*alert('Something went wrong!');*/
                $('.overlay').hide();
                event.preventDefault();
            }
        };
        xhr.send(formData);
    })

    return false;
}

@Ima 2015-08-13 06:26:46

@Bhargav: Please see the blog post for explanations: goo.gl/umgFFy. If you still have any query, get back to me Thanks

@Piacenti 2014-10-12 05:57:19

Yes you can, just use javascript to get the file, making sure you read the file as a data URL. Parse out the stuff before base64 to actually get the base 64 encoded data and then if you are using php or really any back end language you can decode the base 64 data and save into a file like shown below

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

Of course you will probably want to do some validation like checking which file type you are dealing with and stuff like that but this is the idea.

@Nande 2016-05-21 03:49:05

file_put_contents($fname, file_get_contents($_POST['data'])); file_get_contents deals with the decoding and data:// header

@Adeel 2010-02-23 17:03:33

file upload is not possible through ajax. You can upload file, without refreshing page by using IFrame. you can check further detail here

UPDATE:

With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers.

FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

For more detail, see MDN link

@Ryan White 2012-10-03 00:34:19

Here is a list of the specific browsers that are not supported: caniuse.com/#search=FormData Also I have not tested this but here is a polyfill for FormData gist.github.com/3120320

@Kevin 2012-11-01 05:28:59

Specifically, IE < 10 doesn't, for those too lazy to read the link.

@Brandt Solovij 2013-01-10 23:34:03

2 thoughts: 1st - man this is what makes web development so hilariously wild west. 2nd : @ Vicary - it addresses "the jquery" portion of the question by simply stating it as an unreality as of the time/date posted - to those ends 100% accurate and helpful. ADEEL - +1 great answer if only because backwards compatibility is tantamount.

@Drew Calder 2014-03-06 08:49:41

@Synexis no we don't have to wait that long any more because all IE only has a 22% world wide market share and 27% in the U.S. and dropping fast. Chances are it is people over 70 years old. So rather then IE dictating what developers have to do IE will either have to shape up or get out of the race.

@raju 2014-04-29 18:26:24

It is now possible.

@Nicolas Connault 2014-06-18 04:10:01

@DrewCalder Most IE users are office workers who don't have the choice on which browser to use because of company policies. I don't think age has much to do with it. I'm guessing most people > 70 get their offspring to install Chrome or FF instead :)

@hofnarwillie 2014-06-22 22:26:07

@RyanWhite That isn't actually a FormData polyfill, but rather a polyfill for using FormData within HTML5 Web Workers (which isn't natively supported). This won't work if FormData isn't supported outside of Web Workers.

@Steel Brain 2014-08-03 21:54:03

FormData is undefined in latest Chrome (38.0.2107.3-dev)

@Luminous 2015-07-29 20:54:02

This link really helped me in understanding the bare minimum. I didn't have to use a xhr request. If you do use ajax make sure to set the enctype to "form/multipart"!

@Quy Le 2014-02-16 03:40:02

You can use method ajaxSubmit as follow :) when you select a file that need upload to server, form be submit to server :)

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};

$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});

@fotanus 2014-07-04 17:56:34

I believe you are talking about jquery form plugin. It is really the best option here, apart from the lack of details in your answer.

@Quy Le 2014-07-13 06:04:27

@fotanus you're right! that script must use jquery form plugin to submit use method ajaxSubmit that define in jquery form plugin

@Fallenreaper 2013-10-31 13:03:39

Here was an idea i was thinking of:

Have an iframe on page and have a referencer.

Have a form in which you move the INPUT:File element to.

Form:  A processing page AND a target of the FRAME.

The result will post to the frame, and then you can just send the fetched data up a level to the image tag you want with something like:

data:image/png;base64,asdfasdfasdfasdfa

and the page loads.

I believe it works for me, and depending you might be able to do something like:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});

@JDuarteDJ 2018-08-14 14:32:03

I don't see how this improves any other answer given before. Also it's Propagation not propigation! ;)

@Gvice 2013-01-28 21:46:09

$("#submit_car").click( function() {
  var formData = new FormData($('#car_cost_form')[0]);
$.ajax({
       url: 'car_costs.php',
       data: formData,
       async: false,
       contentType: false,
       processData: false,
       cache: false,
       type: 'POST',
       success: function(data)
       {
       },
     })    return false;    
});

edit: Note contentype and process data You can simply use this to upload files via Ajax...... submit input cannot be outside form element :)

@Jomy John 2013-10-09 09:22:53

Using this method, you can post form but not with 'file' type fields. This question is specifically about file upload.

@lgersman 2012-09-17 14:40:21

In case you want to do it like that:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

than

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

might be your solution.

@coolesting 2012-12-20 03:41:27

Where is the upload method in $ object, the above link is not existing

@Andrew Barber 2013-04-08 15:28:48

Thanks for posting your answer! Please be sure to read the FAQ on Self-Promotion carefully. Also note that it is required that you post a disclaimer every time you link to your own site/product.

@koppor 2012-04-02 13:21:19

An AJAX upload is indeed possible with XMLHttpRequest(). No iframes necessary. Upload progress can be shown.

For details see: Answer https://stackoverflow.com/a/4943774/873282 to question jQuery Upload Progress and AJAX file upload.

@Sasha Chedygov 2012-12-10 21:02:30

Unfortunately IE < 10 don't support this.

@Manki 2011-08-07 04:31:48

  • Use a hidden iframe and set your form's target to that iframe's name. This way, when the form is submitted, only the iframe will be refreshed.
  • Have an event handler registered for the iframe's load event to parse the response.

More details on my blog post: http://blog.manki.in/2011/08/ajax-fie-upload.html.

@Bhargav Nanekalva 2015-08-12 06:22:08

Avoid iframes where possible

@aswzen 2018-04-07 14:06:04

@BhargavNanekalva what is your concern?

Related Questions

Sponsored Content

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

10 Answered Questions

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

32 Answered Questions

[SOLVED] How can I upload files asynchronously?

54 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

40 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 704496 View
  • 2541 Score
  • 40 Answer
  • Tags:   javascript jquery

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

18 Answered Questions

[SOLVED] Preview an image before it is uploaded

18 Answered Questions

[SOLVED] Abort Ajax requests using jQuery

Sponsored Content