H5-FileReader实现图片预览&Ajax上传文件
图片预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="/static/jquery.min.js"></script>
</head>
<body>
<!-- accept属性可以指定文件输入框选择的文件类型 -->
<input type="file" id="img_checker" accept="image/*">
<input type="button" onclick="upload()" value="上传">
<hr>
<img src="" id="show_img">
<script>
//给文件输入框绑定事件
document.getElementById('img_checker').onchange = function () {
var fileReader = new FileReader();
//读取文件输入框已选择的文件
fileReader.readAsDataURL(this.files[0]);
//注册文件加载完毕之后的时间
fileReader.onload = function () {
//让img标签的src属性指向读取的文件
document.getElementById('show_img').src = fileReader.result;
}
}
</script>
</body>
</html>
Ajax文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="/static/jquery.min.js"></script>
</head>
<body>
<!-- accept属性可以指定文件输入框选择的文件类型 -->
<input type="file" id="img_checker" accept="image/*">
<input type="button" onclick="upload()" value="上传">
<hr>
<img src="" id="show_img"> <script>
function upload() {
//创建一个form数据对象
var formData = new FormData()
//将图片文件数据添加到form对象中
formData.append('avatar', document.getElementById('img_checker').files[0])
$.ajax(
{
url: "/upload/",
type: "post",
//与普通Ajax提交不同的是,上传文件需要指定processData和contentType属性值为false,原来的data对象直接使用FormData对象
processData: false,
contentType: false,
data: formData,
success: function (data) {
alert(data)
}
}
)
//此时后端就可以像接收传统form表单提交的数据方式接收图片
}
</script>
</body>
</html>
H5-FileReader实现图片预览&Ajax上传文件的更多相关文章
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
- vue组件利用formdata图片预览以及上传《转载》
转载修改 在项目中直接新建一个单文件页,复制一下代码即可 upload组件: <template> <div class="vue-uploader" ...
- vue组件利用formdata图片预览以及上传
转载修改 在项目中直接新建一个单文件页,复制一下代码即可 upload组件: <template> <div class="vue-uploader" ...
- js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)
值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回: res.localIds用于上传图片使用 上传图片:wx.uploadImage. 2.上传图片的时候 ...
- jquery+html5+canvas实现图片 预览 压缩 上传
javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...
- php ajax bootstrap多文件上传图片预览,ajax上传文件
<form enctype="multipart/form-data" id="upForm"> <label class="btn ...
- 用js实现预览待上传的本地图片
js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...
随机推荐
- CentOS 6.7 配置 yum 安装 nginx
第一步,在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim nginx.repo 填写如下内容: [nginx] na ...
- Pyhthon爬虫其之验证码识别
背景 现在的登录系统几乎都是带验证手段的,至于验证的手段也是五花八门,当然用的最多的还是验证码.不过纯粹验证码识已经是很落后的东西了,现在比较多见的是滑动验证,滑动拼图验证(这个还能往里面加广告).点 ...
- 【GIS】Vue修改图层透明度
1.添加透明度控制条 <input id="slider" type="range" min="0" max="1" ...
- IOS Https适配摸索
转:http://www.jianshu.com/p/f312a84a944c https封面 在WWDC 2016开发者大会上,苹果宣布了一个最后期限:到2017年1月1日 App Store中的所 ...
- C - Building Fence
Long long ago, there is a famous farmer named John. He owns a big farm and many cows. There are two ...
- 洛谷P1118 数字三角形【dfs】【STL】
题目链接:https://www.luogu.org/problemnew/show/P1118 题意: 1~n的一个排列,相邻的两项加起来得到下一行. 现在给定最后一行的数字,问最初的1~n的排列是 ...
- CH6201 走廊泼水节【最小生成树】
6201 走廊泼水节 0x60「图论」例题 描述 [简化版题意]给定一棵N个节点的树,要求增加若干条边,把这棵树扩充为完全图,并满足图的唯一最小生成树仍然是这棵树.求增加的边的权值总和最小是多少. 我 ...
- React event
React event 组件: React 自有方法 用户定义方法 一.虚拟事件对象 事件处理器将会传入 虚拟事件对象 的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法 ...
- 如果是多个 c 代码的源码文件,编译方法如下: $ gcc test1.c test2.c -o main.out $ ./main.out test1.c 与 test2.c 是两个源代码文件。
如果是多个 c 代码的源码文件,编译方法如下: $ gcc test1.c test2.c -o main.out $ ./main.out test1.c 与 test2.c 是两个源代码文件.
- 使用@import导入实现了ImportBeanDefinitionRegistrar接口的类,不能被注册为bean
今天在调试公司spring项目的时候发现了这样一个问题,由于我们的项目使用的是springboot就以springboot为例,代码如下: @Import({DataSourceRegister.cl ...