h5图片上传简易版(FileReader+FormData+ajax)
一、选择图片(input的file类型)
<input type="file" id="inputImg">
1. input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口;file类型的input会有files属性,保存着文件的相关信息。
2. input.files是一个数组,由传入的file对象组成。每个file对象包含以下属性:
lastModified:数值,表示最近一次修改时间的毫秒数;
lastModifiedDate:对象,表示最后一次修改时间的Date对象(高程中说是字符串,根据上图可看出应该为对象,为了层级清晰未对其展开,大家可自行查看,其可调用Date对象的有关方法,例如getDay方法);
name:本地文件系统中的文件名;
size:文件的字节大小;
type:字符串,文件的MIME类型;
weblitRelativePath:此处为空;当在input上加上webkitdirectory属性时,用户可选择文件夹,此时weblitRelativePath表示文件夹中文件的相对路径。比如:
二、读取图片数据 (FileReader对象)
FileReader 对象是一种异步文件读取机制,使用 File或 Blob对象指定要读取的文件或数据,结合input:file可以很方便的读取本地文件。
var reader = new FileReader();//创建一个FileReader实例
reader.readAsDataURL(file);//调用fileReader对象的方法,将文件读取为DataURL
reader.onload = function(){//处理事件
console.log(this.result);//读取完成后,数据保存在对象的result属性中,打印结果如下:(截取部分结果)
}
三、上传图片 ( formData对象 )
1. 用一些键值对来模拟一系列表单控件,以key与value形式组装成一个对象,FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。
2. 异步上传二进制文件。
3. 属性不是直接挂载在你这个FormData实例上。可以通过它提供的迭代器,或者get方法去取值。
var formData=new FormData();//创建一个空对象实例
formData.append('key',value);//向该对象添加字段
console.log(formData.get("key")); // 打印key值对应的value值
4. formData操作
(1)获取值:通过formData.get(key)/getAll(key)来获取对应的value
(2)添加数据:通过formData.append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
(3)修改数据:通过formData.set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值
(4)判断是否该数据:通过formData.has(key)来判断是否对应的key值
(5)删除数据:通过formData.delete(key),来删除数据
(6)遍历数据:通过formData.entries()来获取一个迭代器,然后遍历所有的数据
(7)发送数据:ajax异步请求
四、jQuery上传图片代码
var formdata;
if (typeof FileReader === 'undefined') {//检测浏览器对FileReader兼容性
showimg.innerHTML = "抱歉,你的浏览器不支持 FileReader";
imginput.setAttribute('disabled', 'disabled');
}
else {
imginput.addEventListener('change', function() {
var file = this.files[0];
console.log(file);
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();//创建一个FileReader实例
reader.readAsDataURL(file);//将文件内容进行base64编码后输出
//console.log(reader)
reader.onload = function(e) {
//console.log(this.result);//读取完成后,数据保存在对象的result属性中
$(showimg).append('<img src="' + this.result + '" alt=""/>');//将选中的图片显示在页面上 //alert('111');
formData=new FormData();
formData.append('file',file);
console.log(formData.getAll('file'));
}
}, false);
}
$.ajax({
url : url,
type : 'post',
dataType:"json",
data:formData,
cache: false,
processData : false,// 告诉jQuery不要去处理发送的数据
contentType : false,// 告诉jQuery不要去设置Content-Type请求头
success : function(data, status, xhr) {
//alert(1);
},
error : function(xhr, errorType, error) {
//alert(0);
}
});
h5图片上传简易版(FileReader+FormData+ajax)的更多相关文章
- H5 图片上传
1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台 ...
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...
- h5图片上传预览与拖拽上传
图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 浅析H5图片上传
概述 最近需求上需要实现图片上传的功能,简单记录下实现过程.目前实现的功能比较简单,主要有以下几点: 图片预览 图片删除 拖拽上传 压缩上传 移动端实现方案:使用File API 主要使用到 File ...
- H5图片上传插件
基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var pa ...
- h5图片上传预览
项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...
- H5图片上传、压缩
1.注册input file标签的onchange事件: 2.检查图片格式: 3.检查图片大小: 4.压缩图片 5.上传图片至服务器: 前端代码: document.getElementById('i ...
- servlet 文件上传简易版
package cn.itcast.servlet; import java.io.File;import java.io.IOException;import java.util.List; imp ...
- h5 图片上传旋转问题
https://blog.csdn.net/netdxy/article/details/51518494 https://www.cnblogs.com/liu-fei-fei/p/5974403. ...
随机推荐
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
- Canvas杂谈
最近在看一些关于Canvas的知识...这篇文章主要是用来记录学习中遇见的一些问题...以及难以理解的一些东西.. 转帖请注明出处:http://www.cnblogs.com/Troy-Lv5/p/ ...
- SSIS ->> 管理和维护SSISDB
Comming soon!!! 参考文献: Setup and Performance Issues with the Integration Services (SSIS) 2012 Catalog ...
- Studying TCP's Throughput and Goodput using NS
Studying TCP's Throughput and Goodput using NS What is Throughput Throughput is the amount of data r ...
- Microsoft.Exchange 发邮件
//Microsoft.Exchange.WebServices.dll ExchangeService service = new ExchangeService(); // 获取身份验证, 能够尝 ...
- ssh_exchange_identification: Connection closed by remote host
用服务器内网ip连接同子网服务器的时候显示ssh_exchange_identification: Connection closed by remote host 防火墙什么都关闭了,还是显示这个问 ...
- tree结构统一修改属性名(递归)
1 //data为需要修改的tree,这里主要是为antd design 里面select规范数据 const ass = (data) => { let item = []; data.map ...
- sublime text html5开发学习 插件篇记录
1.第一步先按照 Package Control,具体步骤自行百度,Google. 2. view in browser 默认的快捷键应该是这样的,我用的是IE浏览器.所以ctrl+alt+i 即可让 ...
- Android进阶笔记15:选用合适的IPC方式
1. 相信大家都知道Android进程间通信方式很多,比如AIDL.Messenger等等,接下来我就总结一下这些IPC方式优缺点. 2. IPC方式的优缺点和适用场景 3. 附加:使用Intent实 ...
- mybatis插入返回主键
useGeneratedKeys="true" keyProperty="id" <insert id="insertReturnPrimar ...