HTML5实现多文件多图上传实例

研究了半天发现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);

再看个ajax例子

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>

 

时间： 2024-08-02 19:36:45

HTML5实现多文件多图上传实例的相关文章

php多个文件及图片上传实例详解_php技巧

本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下

php表单文件iframe异步上传实例讲解

本文实例为大家分享了php表单文件iframe异步上传的具体代码,供大家参考,具体内容如下 1.表单中放置iframe元素: 2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件,并且将表单的target设置为iframe,让iframe去提交到服务器进行文件上传: 3.img_upload_process.php中处理文件上传成功后,将上传成功保存的文件路径回传给表单中隐藏域: 4.点击表单提交按钮的时,JS设置表单act

asp.net javascript 文件无刷新上传实例代码第1/2页_实用技巧

在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决,实现无刷新上传. 第一种方法:利用js的ADODB.Stream,将文件先转换成流,再通过js上传到服务器,这样有个好处就是可以上传超大文件,并且由于是数据流,可以支持断点续传.方便显示上传进度等人性化功能.唯一的缺点是要客户端浏览器需要设置安全级别,或者安装相关ActiveX控件(这个控件自己做的,加载到

php 使用html5实现多文件上传实例_php实例

首先向大家介绍一下html5中file的multiple属性 定义和用法 multiple 属性规定输入字段可选择多个值.如果使用该属性,则字段可接受多个值. 实例: <form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" />

基于html5+java实现大文件上传实例代码_java

废话不多说了,直接给大家贴代码了,具体代码如下所示: html代码如下: <body> <input id="fileid" type="file" accept="video/*;capture=camera" onchange="onfile(this)"> <input id="btn" type="button" value="提交&quo

JS插件plupload.js实现多图上传并显示进度条_javascript技巧

本文实例为大家分享了plupload.js多图上传的具体代码,供大家参考,具体内容如下 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

yii2.0使用Plupload实现带缩放功能的多图上传_php实例

本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下 1.文章视图中调用Plupload <?= \common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器 ])?> 2.\common\widgets\Plupload 组件 <

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

php 生成自动创建文件夹并上传文件的示例代码

 本篇文章主要是对php生成自动创建文件夹并上传文件的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助    代码如下: <? session_start(); if($_SESSION['Company']=='') {  //exit(); } ?><?php //上传图片   $uptypes=array('image/jpg','image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','appli