title: HTML5 resize image before upload and send with post request
body: <p>I followed <a href="https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading">this</a> question to resize image before upload and it works. But I need to post this image like  when I submit the form.. I have tried lots of things to do this but no way.. I don't want to send it with ajax. It should be appended to post request as  does. Documents/answers that I found say 'post with ajax'..</p>
  
  <p>Do you have an idea? Thank you for your helps!</p>
  
  <p>Edit: here is the code. (almost identical with the link above)</p>
  
  <pre><code>    function handleFiles()
      {
          var filesToUpload = $(this)[0].files;
          var file = this_input.get(0).files[0];
          var name = file.name;
  
          // Create an image
          var img = document.createElement("img");
          // Create a file reader
          var reader = new FileReader();
          // Set the image once loaded into file reader
          var ctx;
          var dataurl;
          reader.onload = function(e)
          {
              img.src = e.target.result;
              alert(e.target.result);
              var canvas = document.createElement("canvas");
              //var canvas = $("&lt;canvas&gt;", {"id":"testing"})[0];
              var ctx = canvas.getContext("2d");
              ctx.drawImage(img, 0, 0);
  
              var MAX_WIDTH = 1920;
              var MAX_HEIGHT = 1080;
              var width = img.width;
              var height = img.height;
  
              if (width &gt; height) {
                  if (width &gt; MAX_WIDTH) {
                      height *= MAX_WIDTH / width;
                      width = MAX_WIDTH;
                  }
              } else {
                  if (height &gt; MAX_HEIGHT) {
                      width *= MAX_HEIGHT / height;
                      height = MAX_HEIGHT;
                  }
              }
              canvas.width = width;
              canvas.height = height;
              ctx = canvas.getContext("2d");
              ctx.drawImage(img, 0, 0, width, height);
  
              dataurl = canvas.toDataURL("image/jpeg");
              //$('#img_hidden').attr('value', dataurl);
              document.getElementById('image').src = dataurl;
  
          }
          // Load files into file reader
          reader.readAsDataURL(file);
  
      }
  </code></pre>