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

随机推荐

GDB+GDBServer调试Linux应用程序
参考:http://blog.csdn.net/shanghaiqianlun/article/details/7820401 一.gdb+gdbserver总体介绍远程调试环境由宿主机GDB和目标 ...
PHP MySQL Update 之 Update
更新数据库中的数据 UPDATE 语句用于在数据库表中修改数据. 语法 UPDATE table_name SET column_name = new_value WHERE column_name ...
WebService 通用接收方法
/** * @Title: getNetStatusRequest * @Description: TODO(2.1检查网络状态字符串) * @param: * @return: String * @ ...
wso2esb源码编译总结
最近花了两周的空闲时间帮朋友把wso2esb的4.0.3.4.6.0.4.7.0三个版本从源码编译出来了.以下是大概的一些体会. wso2esb是基于carbon的.carbon是个基于eclipse ...
一种基于Qt的可伸缩的全异步C/S架构server实现(二) 网络传输
二.网络传输模块模块相应代码命名空间 (namespace ZPNetwork) 模块相应代码存储目录 (\ZoomPipeline_FuncSvr\network) 2.1 模块结构 ...
u3d shader使用
先建立一个材质球Material 选择shader 把材质球Material 赋给图片
C# 开机启动代码
开机启动/关闭代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...
asp.net后台的一些操作
1.在后台绑定下拉框再返回到前台 protected StringBuilder sq = new StringBuilder();//为了在前台绑定 protected void Page_Load ...
SFTP CONFIGURATION IN FLASHFXP PROGRAM
This is a brief guide on how to configure the FlashFXP FTP client to log on to the domain web space ...
Android中webView的基础使用(一)
WebView是View的一个子类,可以让你在activity中显示网页. 可以在布局文件中写入WebView:比如下面这个写了一个填满整个屏幕的WebView: <?xml version=& ...

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

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

随机推荐

热门专题