hi我使用剑道上传上传图像如何我可以预览图像时，我上传它im使用jquery

hsgswve4 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(89)

这就是我在jave脚本$（“#ImageUpload”）.kendoUpload（{

async: {
        saveUrl: null
    },
    validation: {
        allowedExtensions: [".jpg", ".jpeg", ".png", ".jfif"],
        maxFileSize: 0
    },
    multiple: false,
    select: function (e) {
        var files = e.files;
        var file = files[0].rawFile;
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            var byteArray = new Uint8Array(e.target.result);
            var b64encoded = btoa(String.fromCharCode.apply(null, byteArray));
            var data = { ImageName: file.name, Image: b64encoded, ContentType: file.type };
            $("#image").val(JSON.stringify(data));
        }
        fileReader.readAsArrayBuffer(file);
    },
    remove: function (e) {
        $("#image").val("");
    }
});

个字符
在此输入

[I want to preview image beside name](https://i.stack.imgur.com/NZnBa.png)

型
我尝试代码只是使上传到图像与我们的预览它我想预览它

jquery

来源：https://stackoverflow.com/questions/76661711/hi-i-use-kendo-upload-to-upload-image-how-i-can-preview-image-when-i-upload-it-i

1条答案

按热度按时间

rslzwgfq1#

要预览上传的图像，可以动态创建<img>元素，并将其src属性设置为base64编码的图像数据。你可以使用下面的代码：

// Create an <img> element for preview
var img = document.createElement('img');
img.src = "data:" + file.type + ";base64," + b64encoded;
img.style.maxWidth = "100%";

// Append the image to a container element
var previewContainer = document.getElementById("imagePreviewContainer");
previewContainer.innerHTML = ""; // Clear previous previews
previewContainer.appendChild(img);

字符串
另外，你删除的函数会像这样改变：

remove: function (e) {
        $("#image").val("");
        // Clear the image preview
        var previewContainer = document.getElementById("imagePreviewContainer");
        previewContainer.innerHTML = "";
    }

型

赞(0）回复(0）举报 2023-08-04

我来回答

hi我使用剑道上传上传图像如何我可以预览图像时，我上传它im使用jquery

1条答案

相关问题

热门标签

最新问答