Как добавить изображения в поле ввода файла?

Question

Я использую компонент (Persits asp) на моем сервере, который получает изображения из файла ввода при отправке формы. И он загружает исходные изображения в натуральную величину, которые могут быть довольно большими, поэтому я хочу уменьшить их, прежде чем загружать их.

В приведенном ниже коде я выбираю, а затем уменьшаю изображения из файла ввода до 600 Затем я хотел бы удалить исходные изображения из входного файла и добавить уменьшенные изображения. Я пытаюсь заставить его работать с новой FormData (); но безуспешно.

Так что любой вклад действительно оценили, большое спасибо!

document.getElementById('files').onchange = function (e) {
var image = e.target.files[0];

        URL=window.URL|| window.webkitURL;
        var fileURL=URL.createObjectURL(image);
        var img=new Image(); 
        img.src=fileURL; 

for (var i = 0; i < e.target.files.length; i++)
    {   

        $$(document).find('canvas').remove();
        var image = e.target.files[i];
        window.loadImage(image, function (img) {
            if (img.type === "error") {
                console.log("couldn't load image:", img);
            } else {

                window.EXIF.getData(image, function () {
                    //console.log("load image done!");
                    var orientation = window.EXIF.getTag(this, "Orientation");

                    var theimage = window.loadImage.scale(img,
                        {orientation: orientation || 0, theimage: true, maxHeight: 600});

                        //here I try to append the scaled image, but it is not working and I get       no errors so I´m not sure where I go wrong?
                        var fd = new FormData();
                        fd.append("file", theimage);


                    //create and display thumbnail
                    var canvas = window.loadImage.scale(img,
                        {orientation: orientation || 0, canvas: true, maxHeight: 100});
                    document.getElementById("container").appendChild(canvas);

            });
                });
            }
        });
    }
    };