html控件代码:

                     <form id="form1">
<p><input type="file" name="mfile" id="mfile" />&nbsp;<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 上传文件 页面不刷新的更多相关文章

  1. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  2. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  4. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  5. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  6. js上传文件

    一.原始的XMLHttpRequestjs上传文件过程(參考地址:http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html) 用到两个对象 第一个对象: ...

  7. js上传文件夹

    用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助.此控件PC全平台支持包括mac,li ...

  8. 纯js上传文件 很好用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 原生js上传文件,使用new FormData()

    当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multi ...

随机推荐

  1. C++ const&的一个特性

    最近在搜索类似scope exit的实现时,除了发现已经有人向标准委员会提出意见,还得到一些意外的C++特性,这个特性一直都存在,而且很有趣 http://herbsutter.com/2008/01 ...

  2. 【转】Android4.4(MT8685)源码蓝牙解析--BLE搜索

    原文网址:http://blog.csdn.net/u013467735/article/details/41962075 BLE:全称为Bluetooth Low Energy.蓝牙规范4.0最重要 ...

  3. Android4.0 -- UI控件之 Menu 菜单的的使用(三)

    上一讲 [Android 开发]:UI控件之 Menu 菜单的的使用(二) 我们讲解了创建上下文菜单的第一种使用方式:Creating a floating context menu [创建悬浮的上下 ...

  4. How many ways

    How many ways Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  5. tcp/ip体系-转载

    如果还想在测试这条路上继续走下去的话,那么下面这些东西就是我们必须去掌握的,至少你还不想止步于简单的黑盒测试--其实,一直想去接触Linux下的应用测试,这样能学到东西会很多,而且会非常的受用.之前听 ...

  6. ARM学习笔记7——乘法指令

    ARM乘法指令完成两个数据的乘法,两个32位二进制数相乘的结果是64位的4积. 其中: 1.“RadHi:RdLo”是由RdHi(最高有效32位)和RdLo(最低有效32位)链接形成的64位数,“[3 ...

  7. Ubuntu12.04-64bits搭建FFmpeg环境

    所有的环境搭建动作请参考FFMpeg官方网站:http://www.ffmpeg.org/index.html 1. 获取源代码: git clone git://source.ffmpeg.org/ ...

  8. BAT-使用BAT方法判断网络启动EXE(快捷方式)

      原理思路:先启动iNode,如果访问www.baidu.com成功,证明网通了,这时就启动GXT和邮件等.PS:因为对BAT不清楚,所以自己写的东东可能有问题,希望大家有了解BAT的,看一下是否正 ...

  9. c语言结构体中的冒号的用法

    结构体中常见的冒号的用法是表示位域. 有些信息在存储时,并不需要占用一个完整的字节,   而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1   两种状态,   用一位二进位即可.为了节省 ...

  10. Rotating Scoreboard - POJ 3335(半面相交求多边形内核)

    题目大意:RT 分析:所谓内核可以理解为在多边形内存在点可以在这个点上看到多边形内部所有的部分,当然怎么求出来就是问题的关键了.我们知道多边形的每条边都是边界值,边的左边和右边肯定是一部分属于多边形一 ...