首页 > 作文

HTML5实现预览本地图片

更新时间:2023-04-06 13:51:39 阅读: 评论:0

问题描述
假设我们在 html 里面有一个图片上传控件:

复制代码 代码如下:

<input id=”upload_image” type=”file” name=̶走的意思1;image” accept=”image/*” />

注意这个 accept=”image/*” 非常重要,它指定了上传的是图片,在移动端的时候会关联到系统的弹窗选择类型等问题,务必加上。
然后,问题是,我们在没有提交这个表单到服务器之前,有没有办法把图片的内容读取出来呢?
看似简单,都是客户端的文件,应该是可以的,但在之前确实没什么好办法,但是自从有了html5,这个功能又回来了,通过filereader可以轻松的实现这个功能。
例子说明问题

复制代码 代码如下:

$(function() {

$(‘#upload_image端午节的英文217;).change(function(event) {

// 根据这个 <input> 获取文件的 html5 js 对象

var files = event.target.files, file;

if (files && files.length > 0) {

// 获取目前上传的文件

file = files[0];

// 来在控制台看看到底这个对象是什么

console.log(file);

// 那么我们可以做一下诸如文件大小校验的动作

if(file.size > 1024 * 1024 * 2) {

alert(‘图片大小不能超过 2mb!’);

return fal;

}

// !!!!!!

// 下面是关键的关键,通过这个 file 对象生成一个可用的图像 url

// 获取 window 的 url 工具

var url = window.url || window.webkiturl;

// 通过 file 生成目标 url

var imgurl = url.createobjecturl(file);

// 用这个 url 产生一个 <img> 将其显示出来

$(‘body’).append($最大的数字是多少(‘<img/>’).attr(‘src’, imgurl));

// 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 url 就无效了

// url.revokeobjecturl(imgurl);

}

});

});
慰问金

简要说明
简单来说整个操作设计如下几步:
1.通过 <file> 的 change 事件触发事件,并且获取 event 对象;
2.通过 event 对象获取上传的文件的 js 对象 file ;
3.通过 window.url 工具从 file 对象生成一个可用的 url;
4.把这个 url 置入使用;
5.*释放这个 url 的伺服
关键点:
1.对于同一个 file ,每次调用 url.createobjecturl 的时常见等价无穷小候,都会重新生成一个不同的 url;
2.调用 url.createobjecturl 的时候,浏览器自动在内存中开辟空间,用于伺服这个 url,也就是使得这个 url 可以请求成功;
3.如果调用了 url.revokeobjecturl(imgurl); 之后,这个伺服就会关掉,再请求这个 url 就会 404;
4.这一切都是客户端的事情,服务器端对此一无所知,包括你选择的这个图;
5.这个 imgurl 大概是这个样子:blob:http%3a//localhost%3a8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb

本文发布于:2023-04-06 13:51:37,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/73e24d70ce58b07deed8002e89a7fa82.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:HTML5实现预览本地图片.doc

本文 PDF 下载地址:HTML5实现预览本地图片.pdf

标签:对象   都是   代码   就会
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图