用H5上传文件
//1,第一步读取用户选中的文件
<input type="file" accept="image/*" onchange = "selectedFile()"/> function selectedFile(){
var oFile = event.target.files[0]; var fileReader = new FileReader(); fileReader.onload = function(){
var base64URL = this.result ;
var blob = convertBase64UrlToBlob(base64URL,'image/jpeg');
uploadImage(blob);
} fileReader.readAsDataURL(oFile)
} //2,第二步将base64图片转换为Blob对象 function convertBase64UrlToBlob(urlData, filetype){
//去掉url的头,并转换为byte
var bytes = window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Int8Array(ab);
var i;
for (i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type : filetype});
} //3,第三步使用formData上传数据
function uploadImage(blob){
var formData = new FormData();
formData.append('userProfile',blob);
var xhr = new XMLHttpRequest();
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将参数解析成传统form的方式上传
xhr.open('post', '/upload.php',true);
xhr.onload = fn();//上传成功事件监听
xhr.onerror = fn(); //上传失败事件监听
xhr.send(formData);
}
一种更简便的H5上传方式
var change = function(){
var file = event.target.files[0];
var fileReader = new FileReader(); fileReader.onload = function(){
var result = this.result;
var blob = new Blob([result],{type:file.type});
var formData = new FormData();
formData.append('userAvatar',blob,file.name);
//添加其他表单字段
formData.append('username',document.getElementById("uname").value)
formData.append('pwd',document.getElementById("upwd").value);
$.ajax({
type:"post",
url:"http://localhost:3000/uploads",
async:true,
processData:false,
contentType:false,
data:formData,
timeout:6000,
success:function (data) {
console.log('upload success')
},
error:function (xhr,text) {
if(text === 'timeout'){
xhr.abort();
}
}
});
} fileReader.readAsArrayBuffer(file);
}
用H5上传文件的更多相关文章
- H5上传文件
XMLHttpRequest 在Html5 规范中已经有全新的变化,规定了XMLHttpRequest Level 2规范(目前最新版本)包含下列新的特性: 处理字节流,例如作为上传或者下载的File ...
- H5的FormData对象完成ajax上传文件multiFile
最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...
- h5属性直接控制上传文件类型
和公司前端交互的时候发现我在选择上传文件的时候只能选择图片,其他类型,text,doc等等等等全部无法选择 仔细查看了下代码,发现归功于H5新增(??没查到资料,不确定是不是H5的)的input属性 ...
- [转] h5上传视频或文件编写
Html5 finally solves an age old problem of being able to upload files while also showing the upload ...
- H5+MUI上传文件
应用场景:MUI+H5+WEBAPI 今天在给我外甥女调手机端上传图片的时候,发现他是直接调用的MUI下的api,直接调取相册或者相机,到最后只看见了一个文件的路径,所以以前写的上传文件就不太好套上去 ...
- H5利用formData来上传文件(包括图片,doc,pdf等各种格式)方法小结!
H5页面中我们常需要进行文件上传,那么怎么来实现这个功能呢??? 我主要谈如下两种方法. (一).传统的form表单方法 <form action="/Home/SaveFile1&q ...
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...
- H5 FormData对象的使用——进行Ajax请求并上传文件
XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- FTP上传文件到服务器
一.初始化上传控件. 1.我们这里用dropzone.js作为上传控件,下载地址http://www.dropzonejs.com/ 2.这里我们使用一个div元素作为dropzone载体. < ...
随机推荐
- 如何修改 FastAdmin 弹窗大小?
如何修改 FastAdmin 弹窗大小? 参考代码 1 如下: buttons: [ { name: 'start', , , , extend: 'data-area=\'["350px& ...
- python的os模块总结
python的os模块总结 目录 常用方法和属性总结 文件操作 目录操作 常用方法和属性总结 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir(&quo ...
- 牛客国庆集训派对Day4 Solution
A 深度学习 puts(n) #include <bits/stdc++.h> using namespace std; int main() { double n; while ( ...
- 洛谷P1198 [JSOI2008]最大数(BZOJ.1012 )
To 洛谷.1198 最大数 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当 ...
- Python3练习题系列(07)——列表操作原理
目标: 理解列表方法的真实含义. 操作: list_1.append(element) ==> append(list_1, element) mystuff.append('hello') 这 ...
- Revit API创建房间
start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] ); ...
- 三大分析法——SWOT、PEST、波特五力
SWOT分析法 「SWOT分析模型简介」 (也称TOWS分析法.道斯矩阵).在现在的战略规划报告里,SWOT分析应该算是一个众所周知的工具.来自于麦肯锡咨询公司的SWOT分析,包括分析企业的优势(St ...
- JavaScript 空间分析库——JSTS和Turf【转】
https://blog.csdn.net/neimeng0/article/details/80363468 前言 项目中有管线的空间拓扑关系查询需求,在npm中检索到JSTS和Turf两个Java ...
- 出现System.web.mvc冲突的原因及解决方法CS0433
1.问题描述 CS0433:类型“System.Web.Mvc.WebViewPage<TModel>”同时存在于URL1和URL2中 2.解决方案 找到Web.config文件中的< ...
- Android系统资源图标android.R.drawable
Android™ 2.1 android.R.drawable Icon Resources Android™ 1.5 android.R.drawable Icon Resources Androi ...