产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 开发与运维 文章 正文

js实现上传图片前本地预览

2022-01-14 113
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js实现上传图片前本地预览
+关注继续查看
<!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>
文章标签：
JavaScript
关键词：
JavaScript上传图片预览
JavaScript预览
JavaScript上传图片
JavaScript实现
王磊-phper
目录
相关文章
1387809421166477
|
8月前
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果，首先要确定需要哪些技术： 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码： &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份： &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
1387809421166477
105 0
不苒
|
8月前
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理，进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理，进来教你完成一个自己的自动实现柯里化方法
不苒
130 0
CodingFire
|
8月前
|
移动开发 JavaScript weex
weex-自定义module，实现weex在iOS的本地化，js之间互相跳转，交互，传值（iOS接入weex的最佳方式）
weex-自定义module，实现weex在iOS的本地化，js之间互相跳转，交互，传值（iOS接入weex的最佳方式）
CodingFire
167 0
XinMo
|
8月前
|
JavaScript 索引
原生JS带你了解数组方法实现及使用
js
XinMo
111 0
柳鲲鹏
|
8月前
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
柳鲲鹏
113 0
鲲志说
|
8月前
|
前端开发 JavaScript
前端：JS实现双击table单元格变为可编辑状态
前端：JS实现双击table单元格变为可编辑状态
鲲志说
296 0
天界程序员
|
8月前
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路，以及它们之间的性能比较
天界程序员
150 1
天界程序员
|
8月前
|
算法 前端开发 JavaScript
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法，splice 和 slice的区别
天界程序员
85 0
天界程序员
|
8月前
|
JavaScript 前端开发 算法
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
天界程序员
154 0
董员外
|
8月前
|
存储 前端开发 算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
董员外
96 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
热门文章
最新文章
1
Python爬虫抓取经过JS加密的API数据的实现步骤
2
小白笔记——vue全局组件注册和全局js引入
3
前端——JavaScript获取系统时间以及通过ajax获取服务器时间
4
如何利用JS获取当前具体日期时间与获取前一天日期时间
5
利用无头浏览器爬取JavaScript生成的网页
6
JS 判断数据类型的9种方法
7
js遍历数组和对象的常用方法有哪些
8
JavaScript的栈结构
9
JavaScript 高级2 ：构造函数和原型
10
读懂这句英国话 async javascript and xml
1
JavaScript操作DOM常用的API
27
2
js实现图片预览翻页
11
3
js计算器
9
4
JavaScript 面向对象 JS原型与原型链基础 1024程序员特别总结
14
5
javascript实现黑客帝国代码雨特效背景效果
11
6
JSP如何调用JS的数据（变量）？
16
7
js手写贪吃蛇游戏
14
8
用js实现轮播图（淡入淡出）
20
9
js练习题
10
10
判断 js 类型的方式
14
相关产品
云迁移中心
文档详情 产品详情
相关课程
更多
JavaScript 自学手册文档教程 JavaScript入门与实战
相关电子书
更多
JavaScript函数 Delivering Javascript to World 编程语言如何演化-以JS的private为例
相关实验场景
更多
Html5和Webpack2：Webpack5打包JS和样式表 JavaScript实现计算器搭建 JavaScript实现别踩白块小游戏 JavaScript实现轮播图展示 JavaScript基础教程 HTML5实现手风琴相册
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
使用ECS和OSS搭建个人网盘