gpt4 book ai didi

javascript - 在将图像上传到服务器之前在 Canvas 中显示图像

转载 作者:行者123 更新时间:2023-11-30 17:47:12 25 4
gpt4 key购买 nike

我试图在将图像上传到服务器之前在 Canvas 中显示图像。我在 html 5 方面没有太多经验。谁能告诉我任何解决方案??

    <form action="#" method="POST" ecrtype="myltipart/form-data">

<button type="buttom" class="file-uploader">
<input class="img-fields" type="file" name="files[]" multiple >
<span>add files ...</span>
</button>



<input type="submit" name="upload" value="upload">

</form>


<canvas></canvas>

最佳答案

通过以下方法,您可以在上传图像之前预览您的图像(100% 客户端)。

给你:

html:

<input type="file" id="fileInput" />
<div id="preview"></div>

JavaScript:

document.getElementById('fileInput').addEventListener('change', function(){
var file = this.files[0];
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(file);
document.getElementById('preview').innerHTML = '<img src="' + blobURL + '" />';
});

希望对您有所帮助。

关于javascript - 在将图像上传到服务器之前在 Canvas 中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19900437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com