在很多项目中都会叫用户上传东西这些的，自从接触了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. 最近看了点C++，分享一下我的进度吧！

    #include <iostream> #include <cmath> #include <iomanip> using namespace std; //Stu ...

  2. 传微软欲收购Xamarin：未来有望通过VS开发iOS和Android应用？

    据CRN报道,其援引匿名人士的消息称,微软将收购一家创建C#移动应用工具的公司或进行注资,并且谈判已经到了最终阶段.这家公司的名字叫做Xamarin,创建于2011年.对于微软来说,收购Xamarin ...

  3. Aizu 2450 Do use segment tree 树链剖分+线段树

    Do use segment tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.bnuoj.com/v3/problem_show ...

  4. 手机端overflow scroll卡顿的情况

    在容器里设置或者html,body{-webkit-overflow-scrolling: touch;}

  5. Java路径操作具体解释

    1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或文件夹在硬盘上真正的路径.(URL和物理路径)比如: C:\xyz\test.txt 代表了test.txt文件的绝对路径.http://w ...

  6. iOS－推送通知

    推送通知可以做3件事:(1)文字信息(2)一种声音 (3)一个徽章的标记号(第几条消息..) 推送通知流程  (app应用程序--->iOS 设备--->APNS(apple服务器)--- ...

  7. Yum本地Rpm库设置

    http://blog.csdn.net/dc_726/article/details/8497188   1 Yum对光盘的支持 查看/etc/yum.repos.d/CentOS-Media.re ...

  8. LLBLGen代码生成工具

    LLBLGen代码生成工具 下载地址:http://www.llblgen.com/ 最新版本4.2 概述 LLBLGen是一个数据访问的解决方案; 你使用LLBLGen创建实体/域模型,定义了映射和 ...

  9. debian下图形化管理工具的安装

    MySQL GUI Tools是一套图形化桌面应用工具套装,可以用来管理MySQL服务器.该套装工具包含三个工具:MySQL QueryBrowser.MySQL Administrator和MySQ ...

  10. tar备份系统的方法

    下面是备份系统的方法: 然后打开终端,输入以下命令: 1.成为根用户:   sudo su 2.转到根目录:   cd / 然後,下面就是我用来备份我的系统的完整的命令:tar -cvpzf /med ...