做项目的时候遇到了这样一个问题,如果用普通的ASP.NET FileUpload控件实现文件上传,那么页面会刷新,那么页面上用JS拼出的元素就会消失,为了上传文件,又不能刷新页面,ajaxfileupload插件是一个很好的选择(插件下载地址:http://www.phpletter.com/DOWNLOAD/)
ajaxfileupload是jQuery的一个插件,使用这个插件同时要引用jQuery.js文件
直接上代码吧
JS代码
//执行AJAX上传文件
$.ajaxFileUpload({
url: '/Web/Teacher/ImportAchievements.ashx',
secureuri: false,
fileElementId: 'fulAchievements',
dataType: 'json',
success: function (data, status) {
alert(data[0]);
}
});说明:
1.这个方法很像大家熟知的$.ajax方法
2.参数说明
url：AJAX的后台代码文件，要接收前台传来的文件数据
secureuri：是否对上传的文件加密
fileElementId：HTML中<input type="file"/>上传控件的Id值，这里需要注意的是，后台代码是通过name-value的形式接收数据的，所以后台代码是通过name来接收数据的，而不是Id（根本原因是，这个方法会自动生成一个表单，将表单提交给后台代码处理）。
dataType：数据类型，一般是‘json’
success：上传成功后执行的回调函数
ASP.NET一般处理程序中的代码
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";//这里很关键，虽然前台数据类型是json，但这里一定要写html
//获取前台传来的文件
HttpFileCollection files = HttpContext.Current.Request.Files;
//将文件保存在网站目录中
files[0].SaveAs(context.Server.MapPath("/Web/uploadFiles/Achievements.xls"));
//返回用json数据格式表示的提示
string result = "[" + "\"" + "成绩导入成功" + "\"" + "]";
context.Response.Write(result);
}这样就实现了AJAX上传文件，页面不会刷新，有需要的试试吧。
经典网页设计系列精彩继续，今天这篇文章向大家展示20新鲜出炉的 HTML5 网站作品，让大家感受一下 HTML5 的魅力。HTML5 新增了许多重要的特性，像 video、audio 和 canvas 等等，这些特性使得能够很容易的网页中包含多媒体内容，而不需要任何的插件或者 API。而其它的新元素，例如 section、article、header 和 nav 等，则是用来丰富网页内容。
- 15个精美的 HTML5 单页网站作品
- 10个很酷的 HTML5 字体应用网站
- 12个精美的 HTML5 个人网站欣赏
- 10个精美的 HTML5 企业网站欣赏
- 15款精美的免费 HTML5 网站模板
Jib
Let’s Travel Somewhere
Pierrick Calvez Studio
Zipper Galeria
Magic Leap
The Good Man
Shiftbrain
Oscar Charlie
梦想天空（jizhula.com）关注前端开发技术，展示HTML5和CSS3应用，分享jQuery插件，推荐网页设计案例。
Handy Test
redstamp.ca
The Trip
WebKnit
I Shot Him
Mode87
Studio 1 Architects
梦想天空（jizhula.com）关注前端开发技术，展示HTML5和CSS3应用，分享jQuery插件，推荐网页设计案例。
iconmonstr
National Academy Museum
Fat Media
Kalixo
Ciroc Mixology
通常我们在加载iframe,或者ajax请求的时候需一个遮罩动画，我们可以这样处理，使用一个绝对定位的div，高度宽度100%,然后append的body中
具体代码可以参考如下
/**
* Author:Zhang Qi
* Create:2013-03-28
* Function:在body中打开遮罩以及关闭
* */
var LoadingUtils = {
Open:function(){
var top= $(this).offset()==undefined?0:$(this).offset().top;
var left= $(this).offset()==undefined?0:$(this).offset().left;
var appender=null;
if($(this).parent().length==0)
{
appender="body";
}else
{
appender=$(this);
}
$("<div class=\"mask\"></div>").css({
display : "block",
width : $(this).outerWidth(),//100%
height : $(this).outerHeight(),//height
top:top,
left:left
}).appendTo(appender);//body
$("<div class=\"mask-msg\"></div>").html("正在处理，请稍候...")
.appendTo(appender).css({
display : "block",
left : ($(this).outerWidth()-153) / 2+left,
top : ($(this).outerHeight()-42) / 2+top,
});
},
Close:function(){
$(".mask").remove();
$(".mask-msg").remove();
}
}样式表
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.3;
filter: alpha(opacity=30);
display: none;
background: #eee;
}
.mask-msg {
position: absolute;
padding: 12px 5px 10px 30px;
width: auto;
height: 16px;
border-width: 2px;
border-style: solid;
display: none;
border-color: #ddd;
font-size:12px;
background: #fff url('/blog_article/loading.gif') no-repeat scroll 5px center;
}
如何调用
1.在DIV ww上显示遮罩
LoadingUtils.Open.call(document.getElementById("ww"));2.遮罩住整个页面
<script type="text/javascript">
$(document).ready(function() {
LoadingUtils.Open.call(this);
});
</script>
扩展=========>IFrame中
window.parent().LoadingUtils.Close();
从子窗中关闭父页的loading动画