基于HTML5多图片Ajax上传可预览

html5多图控件<input id="fileImage" type="file" size="30" name="files[]" multiple /> multiple 这个input的特性是html5新有的，所以IE6这么低级的货是无法兼容的。

这个属性相当于以前的这样的多图情况

<input id="fileImage" type="file" size="30" name="files[]" >

<input id="fileImage" type="file" size="30" name="files[]" >

<input id="fileImage" type="file" size="30" name="files[]" >

不过道理很简单一个是一次只能选择一个图片

HTML5的这个可以选择多个图片

后台代码：

function getimgmany($rr,$upload_image_dir)

{

$fs = $_FILES[$rr];

$imgnames = array();

for($i=0;$i<count($fs['name']);$i++)

{

//得到扩展名

$pathinfo = pathinfo($_FILES[$rr]['name'][$i]);

if($fs['size']==0)continue;

//检查文件扩展名，看是否是支持的图片格式

$fileextname = "jpg|gif|png|jpeg|bmp";

if($type=="file")

{

$fileextname.="|txt|sql|html|htm|pdf|chm|rar|zip|doc|xls";

}

echo $pathinfo["extension"];

if( !preg_match("/^".$fileextname."$/i", $pathinfo["extension"]) )

{

echo "<div style='font-size:12px;color=red;font-weight:bold;'>不支持的扩展名 <a href='javascript:history.back(-1);'>点击返回</a></div>";

exit();

}

srand ((double) microtime() * 948625); 

//生成随机文件名

$targetname =time();

$targetname .= rand() . '.' . $pathinfo["extension"];

$targetpath = $upload_image_dir .strftime ("%Y%m" ,time())."/". $targetname;

copy($_FILES[$rr]['tmp_name'][$i],  $targetpath);

unlink($_FILES[$rr]['tmp_name'][$i]);

$imga = $targetpath;

array_push($imgnames,$imga);

}

return $imgnames;

}

　　php代码：

$imgdir = "uploads/";

$imgs = getimgmany('files',$imgdir);

print_r($imgs);

　　html5 ajax上传图片的代码如下：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTML5上传图片</title>

<style type="text/css">

li{list-style:none}

li img{width:100px}

.tips{color:red}

</style>

</head>

<body>

<p>注意图片太小的话，看不到进度条</p>

<input type="file" id="filesInput" multiple />

<br><br>

<a href="javascript:;" id="btnUpload">开始上传</a>

<p id="info"></p>

<label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>

<span id="percent"></span>

<p id="uploadSpeed"></p>

<ul id="imageBox"></ul>

<script type="text/javascript">

//定义获取对象的方法

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 += "<li>你选择的" + f.name + "文件不是图片</li>";

//跳出循环

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 += "<li><img src='" + e.target.result + "' alt='" + fileName + "' title='" + fileName + "'> 图片名称是：" + fileName + ";图片的的大小是：" + fileSize + ";图片的类型是：" + fileType + ";图片的尺寸是：" + imgWidth + " X " + imgHeight + "</li>";

}

}

})(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);

</script>

</body>

</html>

基于HTML5多图片Ajax上传可预览的更多相关文章

基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
ASP.NET MVC图片管理(上传，预览与显示)
先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)I ...
JavaScript 图片的上传前预览（兼容所有浏览器）
功能描述通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...
jquery +ajax 上传加预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
JQ图片文件上传之前预览功能
1.先准备一个div onchange触发事件 <input type="file" onchange="preview(this)" >< ...
基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

随机推荐

【转】android 物理按键
关键词:android 按键矩阵按键 AD按键平台信息: 内核:linux2.6/linux3.0 系统:android/android4.0 平台:S5PV310(samsung exy ...
navigationBar 背景色
if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7.0) { [[UINavigationBar appearance] s ...
ZOJ1372 POJ 1287 Networking 网络设计 Kruskal算法
题目链接:problemCode=1372">ZOJ1372 POJ 1287 Networking 网络设计 Networking Time Limit: 2 Seconds ...
char与byte的差别
非常多刚開始学习的人(包含我,已经学了一年多java了)肯会对char和byte这两种数据类型有所疑惑,相互混淆,今天特地查了好多资料,对byte和char两种数据类型进行了总结和比較,先将结果与大家 ...
u3d shader使用
先建立一个材质球Material 选择shader 把材质球Material 赋给图片
GCD 和延时调用
因为 Playground 不进行特别配置的话是无法在线程中进行调度的,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. GCD 是一种非常 ...
将mysql服务加入到系统服务中服务器配置注销时不会关闭mysql
将mysql加入系统服务中: 或者在cmd中输入:mysql安装路径\mysql\bin\mydqld.exe --install mysql --defaults-file="mysql安 ...
CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几乎都放在JavaScript上面了,对CSS和HTML这方面 ...
js打印数据类型
console.log({}.toString.call(123))--- [object Number].... [object String] [object Undefined] [object ...
Intersection of Two Linked Lists(java)
eg: a1 → a2 ↘ c1 → c2 → c3 或者直接a1 → b1 ↗ b1 → b2 → b3求公共链表c1. 常规的指针分裂法,复制法,偏移法. public class Solutio ...

基于HTML5多图片Ajax上传可预览

基于HTML5多图片Ajax上传可预览的更多相关文章

随机推荐

热门专题