基于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 ...

随机推荐

网易云课堂_C++开发入门到精通_章节7:模板
课时35类模板类模板创建类模板的实例 class Name<类型参数表>object; 类模板与模板类的区别类模板是模板的定义,不是一个实实在在的类,定义中用到通用类型参数模板类是 ...
telnet 命令使用详解
1..关于NTLM验证由于Telnet功能太强大,而且也是入侵者使用最频繁的登录手段之一,因此微软公司为Telnet添加了身份验证,称为NTLM验证,它要求Telnet终端除了需要有Telnet服务主 ...
JS~delegate与live
在jquery里有两个方法可以用来绑定自动追加出来的DOM对象,它们是live和delegate,事实上,这两个方法是bind方法的一个变体,在对于固定DOM对象时,我们通常使用bind就可以了,而对 ...
Train Problem I(栈)
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
PCI、PCIE配置空间的訪问（MCFG，Bus，Device，Funtion）
一般来说,在x86平台上,有两大类方式能够訪问这一区间的寄存器, 1,配置机制1#或者配置机制2# 訪问时借助in/out指令.请注意,这样的方式有别于一般的in/out指令訪问PCI的IO空 ...
怎样在 Swift 项目中使用 CocoaPods
4个步骤,将 CocoaPods 导入 Swift 1.创建.编辑 Podfile 文件并 pod install 2.使用 File -> New -> File- 创建一个 Heade ...
Photoshop 批量处理图片
不论什么你想反复进行的操作都能够通过创建 Photoshop 批处理程序来完毕.比如.你想批量改变图片的大小,就能够通过下面操作来实现. 1.打开随意一张图片,在动作面板中,点击新建button 2. ...
深入浅出NodeJS——异步I/O
底层操作系统,异步通过信号量.消息等方式有着广泛的应用. PHP语言从头到尾都是以同步堵塞方式执行,利于程序猿顺序编写业务逻辑. 异步I/O.事件驱动.单线程构成Node的基调. why异步I/O ( ...
windows 下使clion支持c++11操作记录
最近用上了windows下的clion,发现默认安装的MINGW版本太低,导致所带的gcc版本竟然是3.5的,实在太老了,不支持c++11,于是手动修改了mingw的版本.首先去mingw的官网下载最 ...
DevExpress中SearchLookUpEdit用法总结
在前一个项目中用到了DevExpress,需要搜索某一个字段,来拉取出对应的相关信息,比来比去,发现SearchLookUpEdit的用户体验更好,但自己是个不折不扣的C#和DevExpress的初学 ...

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

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

随机推荐

热门专题