jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
2013-08-07 14:22
351 查看
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片的,当然就想到了无刷新上传了呀,一般的jquery+ajax的话传递给php的data我习惯用json,然后就不知道怎么怎么把$_FILES数组中的内容给php,我要用move_uploaded_file这个函数来吧$_FILES['file']['tmp_name']移动到我想要的位置,tmp_name是上传的临时路径了啦,具体参看手册,数组中有很多关于文件的记录的。查询了很多记录,要达到无刷新上传,那么有的解决方法是用生成frame来做得,找了很久很久,找到一个插件,jquery的,叫jquery.form,是个表单插件,有兴趣的同学可以上网查看,我这里只说我这个的实现而已,ok,上代码:
响应页面action.php中只是简单的处理上传,然后以json数据的形式返回,供前台显示
然后就完成啦。
好像还有jquery.form还没有给大家,这里就不说了,我网盘有写好的demo,需要的同学可以下载看。
jquery+ajax(php)无刷新上传文件带进度demo下载
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery+php实现ajax文件上传</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <style type="text/css"> .opacity{ opacity:0.3; filter:alpha(opacity=30); background-color: black; } .mask{ position:fixed; _position:absolute; top:0; left:0; z-index:1000; } #main{ width:980px; margin:0px auto; text-align:center; } #loading{ background-color:white; width:100px; height:20px; position:fixed; _position:absolute; text-align:center; border-style:groove; z-index:2000; } </style> </head> <body> <div id="main"> <div class="demo"> <div class="btn"> <span>添加附件</span> <input id="fileupload" type="file" name="mypic"> </div> <div id="zhezhao"> <div id="loading"> <span class="bar"><img src="loading.gif" /></span><span class="percent">0%</span > </div> </div> <div id="showimg"></div> </div> </div> <script type="text/javascript"> $(function () { var percent = $('.percent'); var showimg = $('#showimg'); var zhezhao = $("#zhezhao"); var btn = $(".btn span"); zhezhao.hide(); $("#fileupload").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>"); $("#fileupload").change(function(){ $("#myupload").ajaxSubmit({ dataType: 'json', beforeSend: function() { showimg.empty(); zhezhao.show(); var percentVal = '0%'; percent.html(percentVal); btn.html("上传中..."); }, uploadProgress: function(event, position, total, percentComplete) { $("#zhezhao").attr("class","mask opacity"); $("#zhezhao").css('width',$(window).width()); $("#zhezhao").css('height',$(window).height()); var percentVal = percentComplete + '%'; percent.html(percentVal); $("#loading").css('margin-left',$(window).width()/2-50); $("#loading").css('margin-top',$(window).height()/2-10); }, success: function(data) { var img = "files/"+data.pic; zhezhao.hide(); showimg.html("<img src='"+img+"'>"); btn.html("添加附件"); }, error:function(xhr){ btn.html("上传失败"); } }); }); }); </script> </body> </html>
响应页面action.php中只是简单的处理上传,然后以json数据的形式返回,供前台显示
<?php $picname = $_FILES['mypic']['name']; $picsize = $_FILES['mypic']['size']; if ($picname != "") { if ($picsize > 1024000) { echo '图片大小不能超过1M'; exit; } $type = strstr($picname, '.'); if ($type != ".gif" && $type != ".jpg") { echo '图片格式不对!'; exit; } $rand = rand(100, 999); $pics = date("YmdHis") . $rand . $type; //上传路径 $pic_path = "files/". $pics; move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path); } $size = round($picsize/1024,2); $arr = array( 'name'=>$picname, 'pic'=>$pics, 'size'=>$size ); echo json_encode($arr); ?>
然后就完成啦。
好像还有jquery.form还没有给大家,这里就不说了,我网盘有写好的demo,需要的同学可以下载看。
jquery+ajax(php)无刷新上传文件带进度demo下载
相关文章推荐
- Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- PHP文件上传进度条的具体实现方式
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- PHP+iframe图片上传实现即时刷新效果
- 利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层
- 文件上传(无刷新,带进度条,带网速)下载完整
- JQUERY AJAX无刷新异步上传文件
- struts2框架中实现无刷新文件上传(类似ajax效果)
- jQuery Ajax文件上传(php)
- 大文件上传 进度条显示(仿CSDN资源上传效果)
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- PHP用iframe实现文件异步上传(无刷新)
- PHP_APC+Ajax实现的监视进度条的文件上传
- PHP利用APC模块实现大文件上传进度条的方法
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- 大文件上传 进度条显示(仿CSDN资源上传效果)
- php利用iframe实现无刷新文件上传功能的代码
- PHP利用APC模块实现文件上传进度条的方法
- PHP 实现页面无刷新上传文件