ezdz

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)