html 5 上传图片教程,HTML5实现多文件多图上传实例
HTML5上传图片
注意图片太小的话,看不到进度条
读取进度:
//定义获取对象的方法
function $(id) {
return document.getElementById(id);
}
var filesInput = $("filesInput"),
info = $("info"),
imageBox = $("imageBox"),
btnUpload = $("btnUpload"),
progress = $("Progress"),
percent = $("percent"),
uploadSpeed = $("uploadSpeed");
//定义存放图片对象的数组
var uploadImgArr = [];
//防止图片上传完成后,再点击上传按钮的时候重复上传图片
var isUpload = false;
//定义获取图片信息的函数
function getFiles(e) {
isUpload = false;
e = e || window.event;
//获取file input中的图片信息列表
var files = e.target.files,
//验证是否是图片文件的正则
reg = /image/.*/i;
//console.log(files);
for (var i = 0,f; f = files[i]; i++) {
//把这个if判断去掉后,也能上传别的文件
if (!reg.test(f.type)) {
imageBox.innerHTML += "
你选择的" + f.name + "文件不是图片";
//跳出循环
continue;
}
//console.log(f);
uploadImgArr.push(f);
var reader = new FileReader();
reader.onload = (function(file) {
//获取图片相关的信息
var fileSize = (file.size / 1024).toFixed(2) + "K",
fileName = file.name,
fileType = file.type;
//console.log(fileName)
return function(e) {
//console.log(e.target)
//获取图片的宽高
var img = new Image();
img.addEventListener("load", imgLoaded, false);
img.src = e.target.result;
function imgLoaded() {
imgWidth = img.width;
imgHeight = img.height;
//图片加载完成后才能获取imgWidth和imgHeight
imageBox.innerHTML += "
图片名称是:" + fileName + ";图片的的大小是:" + fileSize + ";图片的类型是:" + fileType + ";图片的尺寸是:" + imgWidth + " X " + imgHeight + "";
}
}
})(f);
//读取文件内容
reader.readAsDataURL(f);
}
//console.log(uploadImgArr);
}
if (window.File && window.FileList && window.FileReader && window.Blob) {
filesInput.addEventListener("change", getFiles, false);
} else {
info.innerHTML = "您的浏览器不支持HTML5长传";
info.className="tips";
}
//开始上传照片
function uploadFun() {
var j = 0;
function fun() {
if (uploadImgArr.length > 0 && !isUpload) {
var singleImg = uploadImgArr[j];
var xhr = new XMLHttpRequest();
if (xhr.upload) {
//进度条(见http://www.css119.com/archives/1476)
xhr.upload.addEventListener("progress",
function(e) {
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
percent.innerHTML = Math.round(e.loaded * 100 / e.total) + "%";
//计算网速
var nowDate = new Date().getTime();
var x = (e.loaded) / 1024;
var y = (nowDate - startDate) / 1000;
uploadSpeed.innerHTML = "网速:" +(x / y).toFixed(2) + " K/S";
} else {
percent.innerHTML = "无法计算文件大小";
}
},
false);
// 文件上传成功或是失败
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status == 200 && eval("(" + xhr.responseText + ")").status == true) {
info.innerHTML += singleImg.name + "上传完成; ";
//因为progress事件是按一定时间段返回数据的,所以单独progress不可能100%的,在这设置传完后强制设置100%
progress.value = 100;
percent.innerHTML = "100%";
isUpload = true;
} else {
info.innerHTML += singleImg.name + "上传失败; ";
}
//上传成功(或者失败)一张后,再次调用fun函数,模拟循环
if (j < uploadImgArr.length - 1) {
j++;
isUpload = false;
fun();
}
}
};
var formdata = new FormData();
formdata.append("FileData", singleImg);
// 开始上传
xhr.open("POST", "upload.php", true);
xhr.send(formdata);
var startDate = new Date().getTime();
}
}
}
fun();
}
btnUpload.addEventListener("click", uploadFun, false);
html 5 上传图片教程,HTML5实现多文件多图上传实例相关推荐
- html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
- 使用百度webuploader插件进行多文件类型分片上传实例
版本:0.1.6 适用所有php站点 日期:2016年11月9日 插件下载地址:http://fex.baidu.com/webuploader/ 所需要的必须文件其他文件可删 webuploader ...
- html ajax打包成app,利用HTML5与ajax完成拖拽上传文件
前言 基于ajax的异步模式的上传控件,基本功能如下: 拖拽上传(利用HTML5新增特定 拖拽事件 以及 event的dataTransfer属性) 单文件/多文件切换(利用php实现单/多文件上传) ...
- php - 基于 webuploader 视频大文件分片分段上传,支持断点续传(刷新、关闭页面、重新上传、网络中断等情况)带进度条,前端后端都有示例源码详细教程
效果图 文件上传前先检测该文件是否已上传,如果已上传提示 "文件已存在",如果未上传则直接上传. 基于 php+webuploader的大文件分片上传,带进度条,支持断点续传(刷新 ...
- vue+element-ui大文件的分片上传和断点续传js-spark-md5和browser-md5-file
注意:以下共两份代码片段,第一份为原博主链接代码,第二份自己写的整体代码(比较乱) 1.参考 https://www.cnblogs.com/kelelipeng/p/10158599.html (j ...
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
- php中file对象实例,AJAX_File, FileReader 和 Ajax 文件上传实例分析(php),File FileReader 可以干什么? Ajax - phpStudy...
File, FileReader 和 Ajax 文件上传实例分析(php) File FileReader 可以干什么?Ajax文件上传例子 FileReader 对象可以读取文件的 Base64编码 ...
- 为什么手机上传图片这么慢 前端_移动端图片上传旋转、压缩的解决方案
前言 在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片旋转了90度d的问题,包括 iPhone 和个别三星手机.这些手机竖着拍的时候才会出现这种问题,横拍出来的照片就正常显示.因此 ...
- form表单刷新_《大胖 ? 小课》- 不用 js 实现文件无刷新上传
这是<大胖小课>栏目的专题一<说说文件上传那些事儿>的第3节-<不用 js 实现文件无刷新上传> 专题已经更新章节: <大胖 • 小课>- 我是这样理解 ...
最新文章
- 企业安全建设之搭建开源SIEM平台(上)
- [导入]在IE耗时操作中加入进度条或进度框
- 使用Lubuntu开发Android应用
- RED5 安装及问题
- python关闭浏览器删除session_Django操作session 的方法
- YbtOJ#883-最大的割【带修线性基】
- c4d阿诺德渲染器支持a卡吗_请问C4D的OC渲染器支持的显卡是越好越快吗?
- 5254. 卖木头块 动态规划
- 统一检测和分割任务!港科大清华IDEA提出基于Transformer统一目标检测与分割框架Mask DINO,效果SOTA!...
- Excel导入导出功能
- windows与mac字体设置
- 海康威视(HIKViSION)2009年校园招聘笔试题-杭州(1)
- MapGuide应用程序示例——你好,MapGuide!
- 【数据库查询表结构】
- Elasticsearch:跨集群复制 Cross-cluster replication(CCR)
- 实现类似IE的松散耦合(Loosely-Coupled )效果——Window Tabifier
- idea注释设置和注释格式
- 大数据:2019年汽车4S店访客画像
- QuartusII全编译报错Error: Current license file does not support the EP4CE6E22C8 device
- 免费的音频编辑器为Mac用户