h5上传图片html5,h5图片上传简易版(FileReader+FormData+ajax)
一、选择图片(input的file类型)
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('');//将选中的图片显示在页面上 //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上传图片html5,h5图片上传简易版(FileReader+FormData+ajax)相关推荐
- HTML5 多图片上传(前端+后台详解)
HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库 手机端实现多图片上传 2.修改代码 我发现他这里 ...
- h5 php 拍照上传图片,H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- php上传图片 中文,php图片上传方法
php图片上传方法 发布于 2015-11-07 21:44:59 | 92 次阅读 | 评论: 0 | 来源: PHPERZ PHP开源脚本语言PHP(外文名: Hypertext Preproce ...
- HTML5实现图片上传与预览
File API File - 独立文件:提供只读信息,例如名称.文件大小.mimetype 和对文件句柄的引用. FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或 ...
- java实现上传图片代码_Java图片上传实现代码
本文实例为大家分享了java图片上传代码,供大家参考,具体内容如下 import java.io.*; import java.net.*; /* *发送端 */ class picsend { pu ...
- kindeditor图片上传 jsp版
经过了那么长时间的搜索,看了好多有关kindeditor图片上传的东西,各种方法也试过了,但总是报服务器发生障碍,今天终于解决了!!!拿出来给大家分享!!! 首先在官网下载kindeditor压缩包, ...
- java图片预览上传_Java实现图片上传预览 (使用ajax提交)
html: 图片上传: js: function changepic(){ var reads = new FileReader(); f = document.getElementById('fil ...
最新文章
- javaScript的调试(二)
- 《1---关于解决MySQL在控制台插入中文乱码问题》
- MIT媒体实验室主任辞去一切职务:拿了爱泼斯坦170万美金,涉及程序违规,麻省理工宣布彻查...
- 使用C语言和i2c-dev驱动
- Scrum项目1.0
- 当Android工程中提示你找不到头文件,但你已经设置头文件路径了
- 攻破 程序员35岁 “瓶颈” 那都不是事!
- uoml文档交换服务器,文档处理系统和方法
- python怎么读取dat类型文件_基于python批量处理dat文件及科学计算方法详解
- 怎样高效地管理自己阅读过的文献资料?
- 数据结构(C语言)超详细视频教程
- MySQL完全卸载教程
- 学习Hibernate框架笔记-第3天
- 10 ,盒图( 统计 ) boxplot :单盒,多盒
- 加拿大麦吉尔大学计算机科学学院,加拿大麦吉尔大学专业:加拿大麦吉尔大学的院校介绍以及专业设置...
- 英语影视台词---绿皮书(2)(利普 我以为你要把那家伙打死了)
- SpringBoot多表联查
- 最近很火的爱心红包教程~可以Biu~发射爱心的微信红包!太有创意啦~
- 基于人体骨架检测的安全警戒线
- 网络安全--跑PIN找回WiFi密码(详细教程)