[imediasun1]

Как осуществить вывод фоток на экран при множественной загрузке, и при этом регулировать их размер(даже если возможно с вашей стороны раскажите как перед выводом сделать кропинг изображения под размер при выводе 300х200

Есть множественная загрузка изображений через html форму

<input type="file" name="my-pic" id="file-field" class="image"/>

и нужно сделать множественный вывод этих изображений с кропингом в див

<div id="photo_copy" ><img src="" class="preview"></div>

Пробовал прикрутить такой скрипт (чтобы натолкнуть вас на мысль выставляю его ниже, уважаемые форумчане)но не пойму как его изменить чтобы это был множественный вывод и уж тем более не пойму как сделать кропинг,

$(function(){
    $(".image").change(showPreviewImage_click);
})

function showPreviewImage_click(e) {
    var $input = $(this);
    var inputFiles = this.files;
    if(inputFiles == undefined || inputFiles.length == 0) return;
    var inputFile = inputFiles[0];

    var reader = new FileReader();
    reader.onload = function(event) {
        $('.preview').attr("src", event.target.result);
    };
    reader.onerror = function(event) {
        alert("I AM ERROR: " + event.target.error.code);
    };
    reader.readAsDataURL(inputFile);
}

раскажите пожалуйста в подробностях и с примерами кода пожалуйста, заранее благодарен серверную сторону затрагивать не надо