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 Feb 11, 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 and an example PHP file upload handler that is easy to Setup.

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>
<input id="fileupload" type="file" name="files[]" multiple>
<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',
        url: 'server/php/',
        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.

Clone this wiki locally