jQuery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
window.FileAPI = {
debug: false // debug mode
, staticPath: '/js/jquery.fileapi/FileAPI/' // path to *.swf
};
</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script><div id="uploader">
<div class="js-fileapi-wrapper">
<input type="file" name="files[]" />
</div>
<div data-fileapi="active.show" class="progress">
<div data-fileapi="progress" class="progress__bar"></div>
</div>
</div>
<script>
jQuery(function ($){
$('#uploader').fileapi({
url: './ctrl.php',
autoUpload: true,
accept: 'image/*',
multiple: true,
maxSize: FileAPI.MB*10 // max file size
});
});
</script>URL to which the request is sent.
If undefined or empty, it is set to the action property of the file upload form if available.
To enable automatic uploads, set this option to true.
Additional form data to be sent along with the file uploads can be set using this option.
Additional request headers.
It specifies that multiple files can be selected at once, default true.
If the value of the type attribute is file, this attribute indicates the types of files that the server accepts;
otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers: image/*, audio/*, video/*, etc.
The ability to download duplicates, default false.
The parameter name for the file form data (the request argument name).
If undefined or empty, the name property of the file input field is used, or files[] if the file input name property is also empty.
The type of data that is expected back from the server, default json.
Chunk size in bytes, eg: .5 * FileAPI.MB.
Number of retries during upload chunks.
The maximum allowed file size in bytes, by default unlimited.
This option limits the number of files that are allowed to be uploaded using this plugin.
Allowable size of uploaded images, eg: { minWidth: 320, minHeight: 240, maxWidth: 3840, maxHeight: 2160 }.
Sort function of selected files.
Filter function of selected files, eg: function (file, info){ return /^image/.test(file.type) && info.width > 320 }.
// Default options
elements: {
// Controls
ctrl: {
upload: '[data-fileapi="ctrl.upload"]',
reset: '[data-fileapi="ctrl.reset"]',
abort: '[data-fileapi="ctrl.abort"]'
},
// Display element depending on files
empty: {
show: '[data-fileapi="empty.show"]',
hide: '[data-fileapi="empty.hide"]'
},
// Display element depending on queue state
emptyQueue: {
show: '[data-fileapi="emptyQueue.show"]',
hide: '[data-fileapi="emptyQueue.hide"]'
},
// Display element depending on upload state
active: {
show: '[data-fileapi="active.show"]',
hide: '[data-fileapi="active.hide"]'
},
// Preview file (single upload)
preview: {
el: 0, // css selector
width: 0,
height: 0,
keepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally
},
// Total size of queue
size: '[data-fileapi="size"]',
// Selected file name
name: '[data-fileapi="name"]',
// Progress bar total
progress: '[data-fileapi="progress"]',
// Filelist options
file: {
// Template
tpl: '[data-fileapi="file.tpl"]',
// Progress bar
progress: '[data-fileapi="file.progress"]',
// Display element depending on upload state
active: {
show: '[data-fileapi="active.show"]',
hide: '[data-fileapi="active.hide"]'
},
// Preview file or icon
preview: {
el: 0, // css selector
get: 0, // eg: function($el, file){ $el.append('<i class="icon icon_'+file.name.split('.').pop()+'"></i>'); }
width: 0,
height: 0,
keepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally
}
},
// Drag and drop
dnd: {
// DropZone: selector or element
el: '[data-fileapi="dnd"]',
// Hover class
hover: 'dnd_hover'
}
}Retrieve file List, takes two arguments.
$('...').fileapi({
onSelect: function (evt, data){
data.all; // All files
data.files; // Correct files
if( data.other.length ){
// errors
var errors = data.other[0].errors;
if( errors ){
errors.maxSize;
errors.maxFiles;
errors.minWidth;
errors.minHeight;
errors.maxWidth;
errors.maxHeight;
}
}
}
});Start uploading.
Start upload the same file.
Common uploading progress.
Progress upload the same file.
Completion of the entire uploading.
Completion of uploading the file.
Retrieve file List, takes two arguments.
$('#box').fileapi({
onDropHover: function (evt, uiEvt){
$(this).toggleClass('dnd_hover', uiEvt.state);
}
});Based on Jсrop.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.FileAPI = { /* options */ };</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jquery.fileapi/jcrop/jquery.Jcrop.min.js"></script>
<link href="/js/jquery.fileapi/jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css"/>Usage:
$('#userpic').fileapi({
url: '...',
accept: 'image/*',
onSelect: function (imageFile){
$('#userpic-upload-btn')
.unbind('.fileapi')
.bind('click.fileapi', function (){
$('#userpic').fileapi('upload');
})
;
$('#image-preview').cropper({
file: imageFile
, bgColor: '#fff'
, maxSize: [320, 240] // viewport max size
, minSize: [100, 100] // crop min size
, aspectRatio: 1 // optional, aspect ratio: 0 - disable, >0 - fixed, remove this option: autocalculation from minSize
, onSelect: function (coords){
$('#userpic').fileapi('crop', imageFile, coords);
}
});
}
});Copyright 2013 Lebedev Konstantin ibnRubaXa@gmail.com http://rubaxa.github.io/jquery.fileapi/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- enhancement
ui eventin onSelect -
maxFilesoption support
- fixed
onFileUpload&onFileProgressevents -
- #9: Preview with aspect ratio keeping support (optional)
-
headers:Object
-
queue(); *clear();
clearOnComplete: false-
resetOnSelect->clearOnSelect
-
resetOnSelectoption, default!multiple
- fix $.fn.cropper reinit
- Inital commit