this code for single image upload and crop ... I want to change this code to multiple upload and crop
<div>
<label>
Product Image:</label><br />
<div>
Select an image file:
<input type="file" id="fileUpload" name="file2" accept="image/gif, image/jpeg, image/png" /></div>
<img id="Image1" src="" alt="" style="display: none" />
<canvas id="canvas" height="5" width="5"></canvas>
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" ng-model="prodimgname" />
<input type="hidden" name="hdnProductType" id="hdnProductType" />
</div>
<div class="col-xs-12 text-right">
<input type="submit" value="Save Product" id="btnUpload" class="btn btn-primary savebtn"
onclick="return validateForm();" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function () {
$('#fileUpload').change(function () {
$('#Image1').hide(); $('#btnUpload').hide();
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1').show();
$('#Image1').attr("src", e.target.result);
$('#Image1').Jcrop({
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
reader.readAsDataURL($(this)[0].files[0]);
var type = $(this)[0].files['0'].type;
document.getElementById('hdnProductType').value = type;
});
$('#btnCrop').click(function () {
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.height = height;
canvas.width = width;
context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
$('#imgCropped').val(canvas.toDataURL());
$('#btnUpload').show();
$('#btnCrop').hide();
};
img.src = $('#Image1').attr("src");
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
};
</script>