jqueryajaxphp无刷新上传文件带遮罩进度条效果的哟

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

>

 

          

            添加附件
           
       

       

       

            0%
           

       

       

  

响应页面action.php中只是简单的处理上传，然后以json数据的形式返回，供前台显示

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