Javascript 不使用ajax将调整大小的图像上载到服务器

我使用以下代码在客户端调整图像大小，效果很好。现在，如何仅通过提交表单而不使用AJAX将调整大小的图像（srcEncode）上载到服务器？

javascript:

function resizeImage() {
    var resize_width = 200;
    var item = document.querySelector("#file").files[0];
    if (item === undefined) {
        return;
    }

    var reader = new FileReader();
    reader.readAsDataURL(item);
    reader.name = item.name;
    reader.size = item.size;
    reader.onload = function(event) {
        var img = new Image();
        img.src = event.target.result;
        img.name = event.target.name;
        img.size = event.target.size;
        img.onload = function(el) {
            var elem = document.createElement('canvas');

            var scaleFactor = resize_width / el.target.width;
            elem.width = resize_width;
            elem.height = el.target.height * scaleFactor;

            var ctx = elem.getContext('2d');
            ctx.drawImage(el.target, 0, 0, elem.width, elem.height);
            var srcEncoded = ctx.canvas.toDataURL(el.target, 'image/jpeg', 0);
            document.querySelector("#img").src = srcEncoded;

            // I want to send srcEncoded to the PHP server, so that, I can get
            // the image on the server using the following php code: 
            // $image = $_FILES["my_image"]["tmp_name"];
            // NOTE: I do not want to use AJAX
            return srcEncoded;
        };
     };
} 

HTML:

---

这回答了你的问题吗？

<form id="form">
    <input id="file" type="file" name="my_image" accept="image/*">
    <button type="submit">Submit</button>
    <img id="img" src="" alt="image">
</form>

$image = $_FILES["my_image"]["tmp_name"];