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. fuser可以用于系统安全检查。

    fuser可以用于系统安全检查.用fuser查看哪些用户和进程在某些地方作什么:fuser -cu /root 简略显示fuser -muv /mnt3 分列显示

  2. Android优秀开源项目

    本文转自:http://blog.tisa7.com/android_open_source_projects Android优秀开源项目 Android经典的开源项目其实非常多,但是国内的博客总是拿 ...

  3. _GUN_SOURCE宏

    问题描述:在编译程序时,提示一个错误和一个警告. error:storage size of tz isn’t know: 其中tz是struct timezone类型的变量. warning:imp ...

  4. Colour your Log4Net events in your RichTextBox zz

    You’re most probably here because you have already read my article How to watch your log through you ...

  5. Excel通过宏创建百万数据

    打开视图->宏->编辑,代码如下,cells(n,m)表示当前Excel表格第n行第m列</span> Sub newdata() Dim i As Long Cells(i, ...

  6. vs2010 更新jQuery智能提示包

    vs2010 更新jQuery只能提示包时,可以直接在NuGet中更新 jquery-2.1.0-vsdoc.js jquery-2.1.0.js jquery-2.1.0.min.js jquery ...

  7. tomcat详细日志配置

    在server.xml里的<host>标签下加上<Valve className="org.apache.catalina.valves.AccessLogValve&qu ...

  8. YII 小模块功能

    //1,使用updateCounters()来更新计数器字段. Book::model()->updateCounters(array('download_count'=>1),':id= ...

  9. ActiveMQ使用总结

    一.下载使用: 官网下载apache-activemq-5.8.0-bin.tar.gz.apache-activemq-5.8.0-bin.zip 解压,然后启动ActiveMQ服务器 方法1: 直 ...

  10. CF 19D 线段树+set压缩坐标轴+离散化map

    题意: n个操作,在200000*200000的平面上加删点 find 严格在坐标右上角,x最小,再y最小的点 线段树做,区间为离散化后的 X轴坐标 ,维护区间点数 和 最小的 y 值 ( 维护最小y ...