在很多项目中都会叫用户上传东西这些的，自从接触了jquery 和ajax之后就不管做什么，首先都会想到这个，我这个人呢？是比较重视客户体验的，这次我这边负责的是后台板块，然后就有一块是要求用户上传照片的，当然就想到了无刷新上传了呀，一般的jquery+ajax的话传递给php的data我习惯用json，然后就不知道怎么怎么把$_FILES数组中的内容给php，我要用move_uploaded_file这个函数来吧$_FILES['file']['tmp_name']移动到我想要的位置，tmp_name是上传的临时路径了啦，具体参看手册，数组中有很多关于文件的记录的。查询了很多记录，要达到无刷新上传，那么有的解决方法是用生成frame来做得，找了很久很久，找到一个插件，jquery的，叫jquery.form，是个表单插件，有兴趣的同学可以上网查看，我这里只说我这个的实现而已，ok，上代码：

 <!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下载

jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟的更多相关文章

  1. ajax实现无刷新上传附件并且显示进度条的实例

    首先:得把php.ini中的post_max_size和upload_max_filesize改成200M或更大(进度条好看效果,默认是2M) html和js代码: <!DOCTYPE html ...

  2. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  3. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  4. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  5. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  6. web 开发之js---巧用iframe实现jsp无刷新上传文件

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

  7. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  8. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  9. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

随机推荐

  1. HDU 5074 Hatsune Miku（DP)

    Problem Description Hatsune Miku is a popular virtual singer. It is very popular in both Japan and C ...

  2. VS项目如何运用svn的忽略列表

    在实际的项目开发中,有些文件(比如bin,obj下的文件)是不需要放在svn里面的,因为每次都会重新生成. 该如何排除这些文件那? 我试着在svn server上删除了这些文件夹,但是在文件夹上还是显 ...

  3. android学习日记19--四大组件之BroadcastReciver(广播接收者)

    二.BroadcastReciver(广播接收者) 1.简述 BroadcastReciver位于android.content包下,主要用于对广播消息(Intent)的过滤并响应的控件.可以理解为全 ...

  4. android学习日记03--常用控件ListView

    常用控件 8.ListView 列表视图,比如游戏的排行榜.列表数据可以根据屏幕大小自适应 列表的显示需要三个元素: a.ListVeiw:用来展示列表的View. b.适配器:用来把数据映射到Lis ...

  5. oracle字段类型

    oracle 字段类型CHAR    固定长度字符串    最大长度2000    bytes              VARCHAR2    可变长度的字符串    最大长度4000    byt ...

  6. Swift数据类型

    1.Swift中常用数据类型:首字母大写 Int.Float.Double.Bool.Character.String Array.Dictionary.元组类型(Tuple).可选类型Optiona ...

  7. 随便写写，当作了解--Css

    Css,Cascading Style Sheets,层叠样式表.用于控制HTML页面样式.他的基本格式由两部分组成: 选择器 声明块 一.使用 css的注释用 /* 注释内容 */ 1.导入外部样式 ...

  8. Javascript中new

    // 加不加new结果都一样 var obj = new Function('var temp = 100;this.temp = 200;return temp + this.temp;'); al ...

  9. 关于JDBC链接数据库的代码实现

    /** * 快速入门 */ @Test public void demo1() { /** * * 1.加载驱动. * * 2.获得连接. * * 3.编写sql执行sql. * * 4.释放资源. ...

  10. SSRS中加入书签功能及数据集窗口

    SSRS在使用过程中,是比较好用的,但如果报表过长,则会比较难看到想看的内容,在SSRS中有书签功能,可以将报表直接直接跳转至书签位置,这样用户可以比较精准的定位到关注位置.使用一个文本框或是图片,再 ...