Js 上传文件 页面不刷新
html控件代码:
<form id="form1">
<p><input type="file" name="mfile" id="mfile" /> <input type="button" value="Upload" onclick="Submit();" /></p>
<p><label id="uploadProgress"></label></p>
</form>
Javascript代码:
<script>function Submit() {
var isTrueExtension = CheckType();
if (isTrueExtension) {
var form = document.getElementById("form1");
if (form["mfile"].files.length > 0)
{
var file = form["mfile"].files[0];
var fd = new FormData();
//传参数
fd.append("afile", file);var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.ashx', true); xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
document.getElementById("uploadProgress").innerHTML = percentComplete + "% uploaded";
console.log(percentComplete + "% uploaded");
}
} xhr.onload = function () {
//上传完成状态为200
if (this.status == 200)
{
var a = this.response;
}
} xhr.send(fd);
}
}
} function CheckType() {
//得到上传文件的值
var fileName = $("#mfile").val();
//返回String对象中子字符串最后出现的位置.
var seat = fileName.lastIndexOf("."); //返回位于String对象中指定位置的子字符串并转换为小写.
var extension = fileName.substring(seat).toLowerCase();
//判断允许上传的文件格式 var allowed = [".cclx", ".cctx", ".ccl", ".cct"];
for (var i = 0; i < allowed.length; i++) {
if (!(allowed[i] != extension)) {
return true;
}
}
alert("不支持" + extension + "格式");
return false;
}
</script>
后台upload.ashx处理代码:
public void ProcessRequest(HttpContext context)
{
HttpRequest request = context.Request;
string _file = request.Files["afile"].FileName;
request.Files["afile"].SaveAs(_file );
context.Response.Write("1");
}
Js 上传文件 页面不刷新的更多相关文章
- 使用ajaxfileupload.js上传文件
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...
- js 上传文件后缀名的判断 var flag=false;应用
js 上传文件后缀名的判断 var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- 前端js上传文件 到后端接收文件
下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
- js上传文件
一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...
- js上传文件夹
用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助.此控件PC全平台支持包括mac,li ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 原生js上传文件,使用new FormData()
当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...
随机推荐
- WordPress Platinum SEO插件跨站脚本漏洞
漏洞名称: WordPress Platinum SEO插件跨站脚本漏洞 CNNVD编号: CNNVD-201309-398 发布时间: 2013-09-24 更新时间: 2013-09-24 危害等 ...
- BZOJ2661: [BeiJing wc2012]连连看
2661: [BeiJing wc2012]连连看 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 483 Solved: 200[Submit][S ...
- 获得WCF Client端的本地端口 z
当WCF调用远程服务时,显示该调用的网速或流量.其中比较关键的一步就是需要获得WCF Client端的本地端口,原来以为是个简单的事情,结果查了1个多小时谷歌,硬是没找到好的法子,只有自己动手了. ...
- 大型邮箱smtp服务器及端口 收集
各大型邮箱smtp服务器及端口收集: 新浪邮箱smtp服务器 外发服务器:smtp.vip.sina.com 收件服务器:pop3.vip.sina.com 新浪免费邮件 外发服务器:smtp.sin ...
- Count Color POJ--2777
Count Color Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 32217 Accepted: 9681 Desc ...
- HDU-2368 Alfredo's Pizza Restaurant
http://acm.hdu.edu.cn/status.php Alfredo's Pizza Restaurant Time Limit: 1000/1000 MS (Java/Others) ...
- IIS6、IIS7和IIS8各版本的差别
一.写在前面 目前市面上所用的IIS版本估计都是>=6.0的.所以我们主要以下面三个版本进行讲解 服务器版本 IIS默认版本 server2003 6.0 server2008 7.0 serv ...
- Web开发需要关注的技术细节
摘要:在网站发布前,开发者需要关注有许多的技术细节,比如接口设计.用户体验.安全性.Web标准.性能.SEO等,倘若一个疏忽就会影响到整体的体验效果.作为一名Web开发者,哪些技术细节需要考虑呢? [ ...
- Project Euler 9
题意:三个正整数a + b + c = 1000,a*a + b*b = c*c.求a*b*c. 解法:可以暴力枚举,但是也有数学方法. 首先,a,b,c中肯定有至少一个为偶数,否则和不可能为以上两个 ...
- wand(weak and)算法基本思路
一般搜索的query比较短,但如果query比较长,如是一段文本,需要搜索相似的文本,这时候一般就需要wand算法,该算法在广告系统中有比较成熟的应该,主要是adsense场景,需要搜索一个页面内容的 ...