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 ...
随机推荐
- MySQL PARTITION 分区
MySQL HASH分区 http://www.cnblogs.com/chenmh/p/5644496.html RANGE分区:http://www.cnblogs.com/chenmh/p/56 ...
- IOS-一步一步教你自定义评分星级条RatingBar
本文转载至 http://blog.csdn.net/hanhailong726188/article/details/42344131 由于项目的需要,需要设计能评分.能显示评分数据的星级评分条,但 ...
- Centos 安装 nload
第一种方法: wget http://mirrors.kernel.org/fedora-epel/6/i386/epel-release-6-8.noarch.rpm rpm -ivh epel-r ...
- 解决Hibernate：could not initialize proxy - no Session(申明：来源于网络)
解决Hibernate:could not initialize proxy - no Session 地址:http://blog.csdn.net/chenssy/article/details/ ...
- RabbitMQ----整理
------------------------------------------------------------------RabbitMQ-------------------------- ...
- .NET Core开发日志——HttpContext
之前的文章记述了从ASP.NET Core Module到KestrelServer的请求处理过程.现在该聊聊如何生成ASP.NET中我们所熟悉的HttpContext. 当KestrelServer ...
- 宝宝刷 leetcode
12/3 1.Two Sum Given nums = [2, 7, 11, 15], target = 9, Because nums[0] + nums[1] = 2 + 7 = 9, retur ...
- tomcat远程部署war包，显示连接被重置
在tomcat 目录: /opt/apache-tomcat-9.0.13/webapps/manager/WEB-INF/web.xml 下修改: <multipart-config> ...
- iOS开发ffmpeg SDK 编译和集成
FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它提供了录制.转换以及流化音视频的完整解决方案.同时,FFmpeg是一套跨平台的方案,所以我们可以在iOS开发中使 ...
- 托布利兹变换 toeplitz 变换
托布利兹变换 toeplitz 变换 算术平均变换 '''An->C=>(A1+A2+A3+...+An)/n->C,K_ni=1/n=>+[AiK_ni->C (Yn- ...