在不使用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,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>

PHP：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

image-resizing javascript jquery