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. WCF 托管在IIS中遇到Http的错误

    IIS8中部署WCF服务出错:HTTP 错误 404.3 - Not Found http://www.cnblogs.com/xwgli/archive/2013/03/15/2961022.htm ...

  2. 产品设计中先熟练使用铅笔 不要依赖Axure

    在互联网产品领域,Axure已成为产品经理.产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解 ...

  3. ctagst简单应用,将Vim改造:Ctags,Taglist,Cscope,OmniCppComplete,SuperTab,Winmanager,NERDTree,MiniBufExplorer,vimrc

    vim + ctags $ ctags #给同一个目录下的所有文件建立tags 这时在tags文件所在的目录下打开源文件阅读,vim就会自动调用tags文件.如果tags文件不在当前目录下,能在命令模 ...

  4. MySQL源码 数据结构hash

    MySQL源码自定义了hash表,因为hash表具有O(1)的查询效率,所以,源码中大量使用了hash结构.下面就来看下hash表的定义: [源代码文件include/hash.h mysys/has ...

  5. IIS7部署ASP.NET MVC4程序报错解决

    今天安装了windows7 开发web项目需要安装IIS,当安装完以后,web程序已经映射到了本地IIS上,运行出现如下错误提示 处理程序“PageHandlerFactory-Integrated” ...

  6. 【session】

    users.json { "tobi": { "password": "ferret", "name": "T ...

  7. java基于xml配置的通用excel单表数据导入组件(五、Action处理类)

    package xxxxxx.manage.importexcel; import java.io.File; import java.util.HashMap; import java.util.M ...

  8. Unity 官方 Demo: 2DPlatformer 的 SLua 版本。

    9月份时,趁着国庆阅兵的假期,将 Unity 官方 Demo: 2DPlatformer 移植了一个 SLua 版本,并放在了我的 GitHub 账号下:https://github.com/yauk ...

  9. Java异常错误的面试题及答案

    1) Java中什么是Exception? 这个问题经常在第一次问有关异常的时候或者是面试菜鸟的时候问.我从来没见过面高级或者资深工程师的 时候有人问这玩意,但是对于菜鸟,是很愿意问这个的.简单来说, ...

  10. 17 Great Machine Learning Libraries

    17 Great Machine Learning Libraries 08 October 2013 After wonderful feedback on my previous post on ...