Resizing image and set it to the inputfile

Question

Im using jquery to resize an image on upload, this work fine. But my problem is that i want to send the resized image,and i want to set the data of the new image in my input file such that on submit this is sent to the server. But im not able to acheive this. each time it is sending the large file. here is my code :

    <div>
                    <input name="photo" type="file"/>                     
                    <p><span></span></p>
                    <i></i>
                </div>
                <script>

                    $().ready(function() {


                        $("input[name*='photo']").change(function(e) {
                            var file = e.target.files[0];

                            // RESET
                            $('#area p span').css('width', 0 + "%").html('');
                            $('#area img, #area canvas').remove();


                           // CANVAS RESIZING
                            $.canvasResize(file, {
                                width: 300,
                                height: 0,
                                crop: false,
                                quality: 80,
                                //rotate: 90,
                                callback: function(data, width, height) {

                                    // SHOW AS AN IMAGE


                                    $('<img>').load(function() {

                                        $(this).css({
                                            'margin': '10px auto',
                                            'width': width,
                                            'height': height
                                        }).appendTo('#area div');

                                    }).attr('src', data);

                                    // here i am trying to assign the resized data to my image from my input file


                                    $(this).files[0] = data;

                                }
                            });

                        });
                    });
                </script>

                <script src="jqLibrary/jquery.exif.js"></script>
                <script src="jqLibrary/jquery.canvasResize.js"></script>
                <script src="jqLibrary/canvasResize.js"></script>
            </div>

Answer 1

In fact i get it to work using filereader and then pass the data to canvas and then submitting via javascritp remoting, as i was using the force.com platform.Here is part of the code :

function uploadFile() {
  var file = document.getElementById('attachmentFile').files[0];
  if(file != undefined) {
  if(file.size <= maxFileSize) {
    attachmentName = file.name;
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
    var tempImg = new Image();
    var dataURL;
    tempImg.src = this.result;
    tempImg.onload = function() {
        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
                 tempH *= MAX_WIDTH / tempW;
                tempW = MAX_WIDTH;
            }
        } else {
        if (tempH > MAX_HEIGHT) {
            tempW *= MAX_HEIGHT / tempH;
            tempH = MAX_HEIGHT;
        }
    }
    var canvas = document.getElementById('myCanvas');
    canvas.width = tempW;
    canvas.height = tempH;
    var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH); 
    attachment = canvas.toDataURL("image/jpeg");                
    attachment = attachment.slice(23);
    positionIndex=0;
    fileSize = attachment.length;
             //this is a function to post the data
    uploadAttachment(null);
         }              
 } 
     fileReader.readAsDataURL(file); 

the important part was the type of file read (readAsDataURL)

Answer 2

We cannot asssign value back to an inputfield for security reason check out this link : How to set a value to a file input in HTML?