jQuery:[1]实现图片上传并预览
2024-08-29 03:23:20
jQuery:[1]实现图片上传并预览
原理
预览思路
1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL;
2.把对象URL赋值给实现写好的img标签的src属性
File对象
File对象可以用来获取文件的信息,还可以用来读取这个文件的内容,通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的DataTransfer对象。
Blob对象
Blob对象是一个包含由只读原始数据的类文件对象,Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基本Blob,继承了Blob的功能,并且扩展了支持用户计算机上的本地文件,我们想要得到的对象URL实际上就是从Blob这个对象获取的。
实例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-2.1.4.js"></script>
<title>Document</title>
</head>
<body>
<input id="upload" type="file">
<img id="preview" src="">
<script>
$('#upload').change(function(){
var obj = document.getElementById('upload').files[0];
var asrc = window.URL.createObjectURL(obj);
document.getElementById("preview").src = asrc;
})
</script>
</body>
</html>
效果
最新文章
- 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
- 使用 itext、flying-saucer 实现html转PDF(转)
- hdu 5310 Souvenir (水)
- SVN菜单说明
- Introduction to the Build Lifecycle
- lesson - 8 Linux文档的压缩和打包
- WordPress禁止版本修订历史、自动保存和自动草稿最新方法汇总
- ●POJ 1113 Wall
- java:构造方法:无参构造/有参构造 this static关键字 静态变量 静态方法 代码块 封装 静态常量。
- nginx之location的匹配规则
- Windows 下 Mysql8.0.12 的安装方法
- ubuntu 下 rvm 卸载和重装
- VS 0x80041FEB
- Construct Binary Tree from Preorder and Inorder Traversal leetcode java
- 父组件中vuex方法更新state,子组件不能及时更新并渲染的解决方法
- 20180201之Burp Suite Professional V1.7.31 相关英文翻译
- LOG4J spring与mybatis整合
- 【转】MySQL下载安装验证
- Python2.x 中文乱码问题
- ssh连接远程主机免密登入