<input type="file" multiple>
这样就可以实现多文件上传，但是此方法不兼容ie8等低版本浏览器。所以项目中我使用的是百度的WebUpload插件，此插件在ie中底层使用flash实现多文件上传。
以下代码是简单的demo，具体使用方法可依据官方文档。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="webuploader.css"/></head><body><div id="uploader" class="wu-example"><!--用来存放文件信息--><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">选择文件</div><button id="ctlBtn" class="btn btn-default">开始上传</button></div></div><script src="jquery-1.8.3.min.js"></script><script src="webuploader.js"></script><script>var uploader = WebUploader.create({// swf文件路径swf: 'Uploader.swf',// 文件接收服务端。server: 'http://webuploader.duapp.com/server/fileupload.php',// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#picker',// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！resize: false,//去重duplicate: true,//限制文件大小fileSingleSizeLimit: 50000,//单位(字节B)//可上传文件的类型accept: {extensions: 'docx,doc,xls,xlsx,ppt,pptx,wps,et,txt,ole,pdf,ceb,jpg,jpeg,bmp,png,rar,zip,caj'}})// 当有文件被添加进队列的时候uploader.on( 'fileQueued', function( file ) {$("#thelist").append( '<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<p class="state">等待上传...</p>' +'</div>' )})// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar')// 避免重复创建if ( !$percent.length ) {$percent = $('<div class="progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo( $li ).find('.progress-bar')}$li.find('p.state').text('上传中')$percent.css( 'width', percentage * 100 + '%' )})uploader.on( 'uploadSuccess', function( file ) {$( '#'+file.id ).find('p.state').text('已上传')})uploader.on( 'uploadError', function( file ) {$( '#'+file.id ).find('p.state').text('上传出错')})uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').fadeOut()})$("#ctlBtn").bind('click', function() {//向服务器端传递的参数uploader.options.formData = {"uuid": "234124"}uploader.upload()})</script></body></html>
//js$(function () {
//文件上传地址
//var url = 'http://localhost/index.php/upload/do_upload'
var url = 'http://localhost/index.php/uploadwe'
//初始化，主要是设置上传参数，以及事件处理方法(回调函数)
$('#fileupload').fileupload({
autoUpload: true,//是否自动上传
//url: url,//上传地址
dataType: 'json',
done: function (e, data) {//设置文件上传完毕事件的回调函数
//$.each(data.result.files, function (index, file) {
$("#myimg").attr({src:data.result.imgurl})
$("#myimg").css({width:"290px",height:"218px"})
//alert(data.result)
},
progressall: function (e, data) {//设置上传进度事件的回调函数
var progress = parseInt(data.loaded / data.total * 5, 10)
$('#progress .bar').css(
'width',
progress + '%'
)
}
})
})
//上传至服务后，服务器返回json数据--上传图片的地址。
//html
<label for="text">上传图片</label>
<input id="fileupload" type="file" name="files" data-url="<span style="color:#ff6666">jquery_save_img</span>" multiple>
//data-url为上传至服务器端的处理接口/地址，可替换js中的url
//服务器端
function jquery_save_img()
{
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg')
$max_size='500000000000' // 最大文件限制（单位：byte）
$upfile='./uploads' //图片目录路径
$file=$_FILES['files']
/*
echo 'filename:'.$file['tmp_name'].'<br />'
echo 'size:'.$file['size'].'<br />'
echo 'type:'.$file['type'].'<br />'
echo 'name:'.$file['name'].'<br />'
*/
if($_SERVER['REQUEST_METHOD']=='POST'){ //判断提交方式是否为POST
if(!is_uploaded_file($file['tmp_name'])){ //判断上传文件是否存在
echo "<font color='#FF0000'>文件不存在！</font>"
exit
}
if($file['size']>$max_size){ //判断文件大小是否大于500000字节
echo "<font color='#FF0000'>上传文件太大！</font>"
exit
}
if(!in_array($file['type'],$arrType)){ //判断图片文件的格式
echo "<font color='#FF0000'>上传文件格式不对！</font>xxx:".$file['type']
exit
}
if(!file_exists($upfile)){ // 判断存放文件目录是否存在
mkdir($upfile,0777,true)
}
$imageSize=getimagesize($file['tmp_name'])
$img=$imageSize[0].'*'.$imageSize[1]
$fname=$file['name']
$ftype=explode('.',$fname)
$picName=$upfile."/cloudy".$fname
if(file_exists($picName)){
//echo "<font color='#FF0000'>同文件名已存在！</font>"
//exit
}
if(!move_uploaded_file($file['tmp_name'],$picName)){
echo "<font color='#FF0000'>移动文件出错！</font>"
exit
}
else{
/*
echo "<font color='#FF0000'>图片文件上传成功！</font><br/>"
echo "<font color='#0000FF'>图片大小：$img</font><br/>"
echo "图片预览：<br><div style='border:#F00 1px solid width:200pxheight:200px'>
<img src=\"".$picName."\" width=200px height=200px>".$fname."</div>"
*/
echo '{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}'
}
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）