<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传图片本地预览效果</title> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <input id="upload" type="file"> <img id="preview" src=""> <script type="text/javascript"> $('#upload').change(function(){ // 获取FileList的第一个元素 var f = document.getElementById('upload').files[0]; src = window.URL.createObjectURL(f); alert(src); document.getElementById('preview').src = src }) </script> </body> </html>
js实现上传图片前本地预览
2022-01-14
170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
js实现上传图片前本地预览
目录
相关文章
|
8月前
|
JavaScript
|
2月前
|
JavaScript
定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图，默认左侧是页面主要内容，minimap.js的好处就是在它的右侧形成一个快速定位通道，产生一个缩小版的页面，即预览效果，可以点击并快速定位到页面的某个位置。简单实用，欢迎下载！
42
0
0
|
4月前
|
SQL
安全
数据库
|
6月前
|
JavaScript
网页CAD（JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown
# CAD网页编程概览
- 使用mxcad库，实现CAD操作如删除、复制、镜像、移动和旋转。
- `erase()`方法删除实体，`clone()`配合`transformBy()`用于复制和编辑。
- `mirror()`和`transformBy(setMirror)`执行镜像操作，基于参考线。
- `move()`和`transformBy(setToTranslation)`实现移动功能。
- `rotate()`和`transformBy(setToRotation)`进行旋转，支持角度输入。
```
326
1
1
|
6月前
|
JavaScript
js中readAsDataURL的意思，可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思，可以用于浏览器预览图像文件或者转成base64字符串
64
0
0
|
7月前
|
JavaScript
|
6月前
|
前端开发
JavaScript
|
8月前
|
JavaScript
前端开发
|
8月前
|
JavaScript
|
8月前
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办？？
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办？？
390
0
0
热门文章
最新文章
1
Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
2
一个好看的小时钟html+js+css源码
3
如何使用Selenium处理JavaScript动态加载的内容？
4
带方向感知功能的js图片遮罩层插件
5
折腾之王：JavaScript之父Brave浏览器与BAT的诞生
6
Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
7
页面滚动触发css3动画js插件
8
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
9
捕获键盘输入和输入组合键的js库hotkeys
10
Node.js导入MongoDB具体操作指南
1
阿里云云效操作报错合集之遇到Node.js的内存溢出问题，该怎么办
161
2
阿里云云效操作报错合集之Node.js构建报错，该如何排查问题
146
3
Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
172
4
Next.js静态出口生成策略深度解析
110
5
Node.js搭建REST API实战：从基础到部署
99
6
前端如何学习Node.js及Node.js的主要用途
110
7
Vue.js组件通信策略详解
68
8
网络爬虫开发：JavaScript与Python特性的小差异
72
9
Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
264
10
JavaScript 使用axios库发送 post请求给后端， 给定base64格式的字符串数据和一些其他参数， 使用表单方式提交， 并使用onUploadProgress显示进度
531