ezdz v0.4.3
ezdz-multiple
jQuery File Input plugin ezdz multiple files and grid preview
It is based on Ezdz jQuery File Input plugin. new features have been added as follows. 1. support multiple file upload. 2. support grid preview of image.
All other settings pls refer to ezdz documentation https://github.com/jaysalvat/ezdz
index.html file demostrates multiple file upload features and preview of image features.
remember add multiple
attribute to input tag.
Sample Usage
in the html head section
<link rel="stylesheet" href="src/jquery.ezdz.css">
<script type="text/javascript" src= "node_modules/jquery/dist/jquery.min.js"></script>
<script src="src/jquery.ezdz.js"></script>
in the body section, simply add normal input tag, the plugin will automatically convert it into dropzone.
<input type="file" name="file_upload[]" accept="image/png, image/jpeg" multiple/>
add javascript pointing to input tag, add customize configuration.
$('input[type="file"]').ezdz({
text: 'drop cover photos',
validators: {
maxWidth: 2000,
maxHeight: 2000,
maxNumber: 6
},
reject: function(file, errors) {
if (errors.mimeType) {
alert(file.name + ' must be an image.');
return;
}
if (errors.maxWidth) {
alert(file.name + ' must be width:2000px max.');
return;
}
if (errors.maxHeight) {
alert(file.name + ' must be height:2000px max.');
return;
}
if (errors.maxNumber) {
alert('you can upload maximum of 6 images');
return;
}
}
});
if you looking for modify preview image grid, editing jquery.ezdz.css
, for example, the code represent 3 columns grid.
.image-g li {
float: left;
max-width: 32%;
max-height: 48%;
padding: 0.10em;
}
.image-g li:nth-child(3n+1) {
clear: left;
}
Release Note
v0.4.2 the repository update to mirror ezdz 0.4.2
v0.4.3 add example to Ezdz plugin
License
The MIT License (MIT)