Skip to content
This repository was archived by the owner on May 25, 2023. It is now read-only.

Basic plugin

Jump to bottom
blueimp edited this page Apr 3, 2012 · 72 revisions

How to use only the Basic plugin (minimal setup guide)

The plugin download package comes with a complete user interface based on Bootstrap. There is also a version available for jQuery UI.

However, if you want to build your own user interface, it is possible to use only the basic plugin version and a minimal setup.
The following is an alternative to index.html with only the minimal requirements and a simple done callback handler (see API and Options on how to use the different options and callbacks):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

How to use image resizing functionality with the basic plugin

Include the following additional scripts (include jquery.fileupload-ip.js after jquery.fileupload.js):

<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<script src="js/jquery.fileupload-ip.js"></script>

If you don't override the add callback option, you'll have image resizing functionality automatically. Else, you can make use of the resize API like this:

$('#fileupload').fileupload({
    /* ... */
    add: function (e, data) {
        $(this).fileupload('resize', data).done(function () {
            data.submit();
        });
    }
});

Please have a look at the API and Options documentations.

Note: Although it is possible to call the fileupload widget method directly on the file input element, it is recommended to use a wrapping form element instead, to prevent a bug in IE6/IE7.

Clone this wiki locally