首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在将图像上传到服务器之前,在画布中显示它们。

在将图像上传到服务器之前,在画布中显示它们。
EN

Stack Overflow用户
提问于 2013-11-11 06:49:10
回答 1查看 416关注 0票数 2

在上传到服务器之前,我试图在画布中显示图像。我对html 5没有太多的经验。谁能给我看这方面的解决方案??

代码语言:javascript
代码运行次数:0
运行
复制
    <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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-11 07:46:22

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

给你:

html:

代码语言:javascript
代码运行次数:0
运行
复制
<input type="file" id="fileInput" />
<div id="preview"></div>

javascript:

代码语言:javascript
代码运行次数:0
运行
复制
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 + '" />';
});

希望这能帮上忙。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19900437

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档