Question

我正在尝试在上传之前用较小的用户图片替换上传的用户图片。

这个概念是修改＆＃39; src＆＃39;输入字段的属性与新调整大小的图像src。但是，这不会发生。浏览器提交原始图像。

这是我的代码：

<input type="file" id="input-file-a" name="image" accept="image/*"/>
<img id="preview"/>


var fileReader = new FileReader();
var filterType = /^(?:image...

fileReader.onload = function (event) {
    var image = new Image();
    image.src = event.target.result;
    var elem_id = 'input-file-a';
    image.onload = function () {
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        canvas.width = image.width / 4;
        canvas.height = image.height / 4;
        context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height );
        document.getElementById('preview').src = canvas.toDataURL();  // <--- This shows the resized preview as expected!
        document.getElementById(elem_id).src = canvas.toDataURL();  // <--- this does not work, should it?       
    };
};

function resizeImage() {
    var elem_id = 'input-file-a';
    var uploadImage = document.getElementById(elem_id);
    if (uploadImage.files.length === 0) {
        return;
    }
    var uploadFile = document.getElementById(elem_id).files[0];
    if (!filterType.test(uploadFile.type)) {
        alert("Please select a valid image.");
        return;
    }

    fileReader.readAsDataURL(uploadFile);
}

我做错了什么？

Answer 1

简短回答是You can't。设置file input值的唯一方法是由用户选择一个文件。想象一下，如果有人写了一个JS文件，它将文件输入值设置为一些敏感数据（来自客户端计算机的一些文件）。这样做是出于安全原因。

如何在javascript上传之前用调整大小的图像替换图像输入字段

1 个答案: