h5-fileuploader
v1.1.0
Published
A javascript fileuploader based on html5
Readme
h5-fileuploader
A javascript file uploader based on html5
Usage
1. Simple way
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="index.js"></script>
</head>
<body>
<input type="file" id="myfile">
</body>
</html>var up = new FileUploader({
fileElement: document.getElementById('myfile'),
server: '/api/upload',
fieldName: 'file',
// Auto upload, uploadInstance.startUpload() need to be called when set to false
auto: false,
multiple: true,
accept: 'image/jpg, image/jpeg, image/png, image/gif',
fileSizeLimit: 1024 * 1024 * 5, // 5Mb
withCredentials: false,
headers: {
xxx
},
// The post parameters send with the upload file
postParams: {
xxx
}
});
/**
* Called on a selected file added to queue
*/
up.fileQueuedHandler = function(file) {
console.log('one file queued: ', file);
};
/**
* Called on all selected files queued
*/
up.filesQueuedCompleteHandler = function(data) {
console.log('all files queued: ', data);
// When auto=false you must manually call the startUpload method
// up.startUpload();
};
/**
* Upload progress
*/
up.uploadProgressHandler = function(file, computable) {
console.log(computable.loaded, computable.total);
};
/**
* Called on a file upload success
*/
up.uploadSuccessHandler = function(file, serverData) {
console.log(serverData);
};
/**
* Called on all files upload success or fail
*/
up.uploadCompleteHandler = function() {
console.log('upload complete');
};2. Complex mode
Manually select files and upload them
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="index.js"></script>
</head>
<body>
<input type="file" id="myfile">
</body>
</html>document.getElementById('myfile').onchange = (e) => {
// Set selected files to uploader
// When uploader adds all files to it's queue then filesQueuedCompleteHandler will be called
up.selectFiles(e.target.files);
};
var up = new FileUploader({
server: '/api/upload',
fieldName: 'file',
auto: false,
fileSizeLimit: 1024 * 1024 * 5, // 5Mb
});
up.filesQueuedCompleteHandler = function(data) {
console.log('all files queued: ', data);
up.setHeader('Authorization', 'xxx');
up.setPostParam('other', 'xxx')
// Call the startUpload
up.startUpload();
};
up.uploadCompleteHandler = function() {
console.log('upload complete');
};Support
Theoretically supports all html5 browsers.
IE 10+
Chrome
Firefox
Safari