html显示本地图片,html实现图片上传预览

　　问题描述

　　假设我们有一个HTML格式的图片上传控件：复制代码如下：

　　输入id= upload _ image type= file name= image accept= image/* /

　　注意，这个accept=image/* 非常重要。它指定当上传的图像在移动端时，它将与系统的弹出窗口选择类型相关联。一定要补充。

　　那么，问题来了，在我们把这个表单提交给服务器之前，有没有办法把图片的内容读出来？

　　看似简单，都是客户端文件，应该是可以的，但是之前真的没有什么好办法。但是自从HTML5出现后，这个功能又回来了，通过FileReader就可以轻松实现。

　　问题复制代码示例代码如下：

　　$(function() {

　　$(#upload_image )。变更(功能(事件){

　　//根据这个输入获取文件的HTML5 js对象

　　var files=event.target.files，file；

　　if (files files.length 0) {

　　//获取当前上传的文件

　　file=files[0]；

　　//过来看看控制台里这个对象是什么。

　　console.log(文件)；

　　//然后我们可以做一些类似文件大小检查的事情。

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

　　Alert(图像大小不能超过2MB！);

　　返回false

　　}

　　//!

　　//这里是key key，通过这个file对象生成一个可用的图片URL

　　//获取窗口的URL工具

　　var URL=窗口。URL window.webkitURL

　　//通过文件生成目标url

　　var imgURL=URL . createobjecturl(file)；

　　//使用此URL生成一个img并显示它

　　$(body )。追加($(img/)。attr(src ，imgURL))；

　　//用下面这句话释放内存中这个url的伺服。运行后，该URL将无效。

　　//URL . revokeobjecturl(imgURL)；

　　}

　　});

　　});

　　简要说明。通过文件的变更事件触发事件，得到事件对象；

　　2.通过事件对象获取上传文件的js对象文件；

　　3.生成可用的URL从文件对象通过窗口。URL工具；

　　4.将此URL投入使用；

　　5.*释放伺服简单来说整个操作设计如下几步： 这个网址

　　1.对于同一个文件，每次调用URL.createObjectURL，都会重新生成不同的URL

　　2.当URL.createObjectURL被调用时，浏览器自动在内存中打开空间为这个URL服务，即使URL请求成功；

　　3.如果调用了URL.revokeObjectURL(imgURL );之后会关闭伺服，然后请求的话URL是404；

　　4.这一切都是客户端的事情，服务器端对此一无所知，包括你选择的这张图；

　　5.这个imgURL看起来是这样的：blob:http://localhost:8000/22cc 97d 5-5e 46-4d 87-9 df4-C3 E8 c 0 a 72 bb

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。