Skip to content

Instantly share code, notes, and snippets.

@jhogervorst

jhogervorst/jQuery.Mobile.ajaxUpload.js

Last active January 1, 2016 15:49
Download ZIP

Revisions

  1. jhogervorst revised this gist Dec 29, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jQuery.Mobile.ajaxUpload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    * https://gist.github.com/jhogervorst/8166217
    *
    * jQuery.Mobile.ajaxUpload.js
    *
    * https://gist.github.com/jhogervorst/8166385
    *
    * Copyright (C) 2013 Jonathan Hogervorst. All rights reserved.
    * This code is licensed under MIT license.
  2. jhogervorst created this gist Dec 29, 2013.
    41 changes: 41 additions & 0 deletions jQuery.Mobile.ajaxUpload.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    /*
    * jQuery.ajaxEnvironment.js
    * https://gist.github.com/jhogervorst/8166217
    *
    * jQuery.Mobile.ajaxUpload.js
    *
    *
    * Copyright (C) 2013 Jonathan Hogervorst. All rights reserved.
    * This code is licensed under MIT license.
    */

    (function($) {
    $.ajaxEnvironment = function(settings, block) {
    var originalSettings = $.ajaxSetup();
    var restoredSettings = {};

    $.each(settings, function(key) {
    restoredSettings[key] = originalSettings[key];
    });

    $.ajaxSetup(settings);
    block();
    $.ajaxSetup(restoredSettings);
    };

    $.mobile.ajaxUpload = {};

    $.mobile.ajaxUpload.changePage = function(form, options) {
    form = $(form);

    $.ajaxEnvironment({
    contentType: false,
    processData: false,
    }, function() {
    $.mobile.changePage(form.attr('action'), {
    data: new FormData(form[0]),
    type: form.attr('method'),
    });
    });
    };
    })(jQuery);
    26 changes: 26 additions & 0 deletions jQuery.Mobile.ajaxUpload.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    # jQuery.Mobile.ajaxUpload

    Function to easily submit forms with file uploads using AJAX in jQuery Mobile. **Not all browsers support file uploads via AJAX!**

    ## Usage

    ```html
    <form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
    <input type="file" name="my_file" id="my_file">
    </form>

    <script>
    $('form#myForm').on('submit', function(event) {
    $.mobile.ajaxUpload.changePage(this);
    return false; // prevent regular submit
    });
    </script>
    ```

    ## Compatibility

    This code has been tested with jQuery 1.9.1 and jQuery Mobile 1.3.2 in Safari on Mac.

    ## License

    This code is licensed under MIT license.