README.md

HTML5 file uploader

This is a simple file upload plugin depends on HTML5. You can use it to mordern browser.

Install

install by bower:

bower install h5uploader --save

or:

git clone https://github.com/wewoor/h5uploader.git

Example

Import this script in you html page:

<script type="text/javascript" src="h5uploader.js"></script>

html

<input type="file" id="myfile" value="" name="myfile" multiple="multiple"/>
<button id="uploader">Upload</button>

Javascript

<script type="text/javascript">
    var uploader = document.getElementById('uploader');
    uploader.addEventListener("click", function(e) {

        H5Uploader.upload({
            action: 'upload',
            id: 'myfile',
            size: {
                max: 5000, // 5000kb 
                valide: function(e) {
                    if (e) {
                        alert("The size of " + e.name + " is exceed max value!");
                    }
                }
            }, // MB
            type: {
                name: 'csv;png;jpg',
                valide: function(e) {
                    if (e) {
                        alert("The type of " + e.name + " is not supported!");
                    }
                }
            },
            progress: function() {
                    var p = document.createElement('p');
                    p.innerHTML = "uploading";
                    p.id = "loading";
                    document.body.appendChild(p);
            },
            success: function(data) {
                alert(data);
                if (data && data == 200) {
                    document.getElementById('loading').innerHTML = "The file upload successfully!";
                    alert("The file upload successfully.");
                }
            },
            fail: function(data) {

            }
        });

    }, false);
    </script>

more examples and demos can be found in /example directory.

Options

name	type	description
action	string	file upload request path
id	string	input element id,example: <input id="myfile"/>
size	object	validate file size
type	object	validate file type
progress	function	progress for upload
success	function	when file upload successfully callback
fail	function	when file upload fail callback

License

MIT