jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的，自从接触了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 无刷新上传文件 带 遮罩 进度条 效果的哟的更多相关文章
- ajax实现无刷新上传附件并且显示进度条的实例
首先:得把php.ini中的post_max_size和upload_max_filesize改成200M或更大(进度条好看效果,默认是2M) html和js代码: <!DOCTYPE html ...
- jQuery+php+ajax实现无刷新上传文件功能
jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- ajax ＋jsp＋iframe无刷新上传文件[转]
http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...
- PHP+Ajax+plupload无刷新上传头像代码
很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...
- web 开发之js---巧用iframe实现jsp无刷新上传文件
首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...
- $_FILES参数详解及简单<form>表单无刷新上传文件
$_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...
- 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- Ajax 无刷新上传文件插件 uploadify 的使用
在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...
随机推荐
- Mysql 培训
1. Mysql 培训 1.1. 培训目的 本文档是针对MySQL 数据库方面的基础培训,为了使项目组成员能够达到使用MySQL 数据库的目的. 1.2. 培训对象 开发者 1.3. 经常使用词及符 ...
- android学习日记07--Canvas画布
1.Canvas Canvas类主要实现了屏幕的绘制过程,其中包含了很多实用的方法,比如绘制一条路径.区域.贴图.画点.画线.渲染文本,当然Android官网提示大家很多方法有不同的重载版本,参数更灵 ...
- careercup-中等难度 17.7
17.7 给定一个整数,打印该整数的英文描述(例如“One Thousand,Two Hundred Thirty Four”). 解法: 举个例子,在转换19 323 984时,我们可以考虑分段处理 ...
- 1、C语言中的函数指针
一 通常的函数调用 void MyFun(int x); //此处的申明也可写成:void MyFun( int ); int main(int argc, char* argv[]) { MyFun ...
- 导入MyEclipse项目乱码
1.右键项目属性→text file encoding →修改为UTF-8,即可自动变成正常的.
- c/c++编译原理
转载自:http://blog.csdn.net/chengocean/article/details/6250779C源程序-->预编译处理(.c)-->编译.优化程序(.s..asm) ...
- 想做一个整合开源安全代码扫描工具的代码安全分析平台 - Android方向调研
想做一个整合开源安全代码扫描工具的代码安全分析平台 - Android方向调研 http://blog.csdn.net/testing_is_believing/article/details/22 ...
- ElasticSearch 概念解析
索引(index) 1. 作为名词: 索引(index)指我们在 ES 中用来存放 doc 的一个库,类似数据库系统的 DB 概念. 2. 作为动词: 指把数据经过分析并存放到 ES 中形成索引(名词 ...
- 哇！今天找到一个非常好用的自动补全插件-necomplete.vim
看别人说的什么xpcomplete,snipte,拿来都不会用,这个necomplete.vim还挺好用的,不用去按C-X,C-O进行补全,把关键字自动的列出来,调用的是用户自定义补全,^u^n^p的 ...
- PHP自动执行程序
/****config.php***/ <?php return 1; //需要停止时改成0 ?> /******************/ ignore_user_abort();//关 ...