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 ...
随机推荐
- 《IT运维之道》
本书共分为5篇,机遇篇.做事篇.处事篇.技能篇和高级篇,从不同的层面阐述了IT运维人员 应掌握的方法及相关知识与技能.本书作者深入浅出.化繁为简,将信息化服务中晦涩的IT标准规范.流程体系用浅显易懂的 ...
- WIN7下制作的ubunbu U盘安装无法使用
想在电脑上装个ubuntu 12.04来个双系统.就在win7下用U盘制作了个安装程序.但是U盘启动安装后一直无法开始安装.网上找了大半天才有个结论解决了. 步骤如下: 去ubuntu官网下载安装的i ...
- 【转】Linux(ubuntu14.04)上编译Android4.4源码的环境搭建及编译全过程
原文网址:http://jileniao.net/linux-android-building.html sublime text让我伤心.本来很信任sublime text的自动保存功能,之前使用一 ...
- 基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建
基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建 http://wenku.baidu.com/view/96fbfe0f581b6bd97f19ea1d.html 用MyE ...
- 去掉有序数组中重复数字 原地 leetcode java (最简单的方法)
1.利用荷兰国旗的思路,每次记住最后一个位置,遇到一个不重复的数,放在它后面,代码很简单. Given a sorted array, remove the duplicates in place s ...
- 深入设计模式(二)——单例模式(Singleton Pattern)
一.单例模式介绍 单例模式(Singleton Pattern),保证一个类只有一个实例,并提供一个访问它的全局访问点.单例模式因为Singleton封装它的唯一实例,它就可以严格地控制客户怎样访问它 ...
- nodejs 基本问题答疑
传统服务器架构1.服务器接到请求2.创建一个新的响应程序的实例 node服务器架构1.服务器接到请求2.检查处理程序是否存在,如果存在直接处理,不存在则创建. node的做法节省了内存 ubuntu下 ...
- Yii框架tips(转)
yii的一些小的技巧 http://www.yiichina.com/topic/151 db组件 'schemaCachingDuration'=>3600, 为什么不起做用?需要开缓存 如何 ...
- WDCP是什么 关于WDCP的详细介绍
WDCP是WDlinux Control Panel的简称,是一套用PHP开发的Linux服务器管理系统以及虚拟主机管理系统,,旨在易于使用Linux系统做为我们的网站服务器,以及平时对Linux服务 ...
- Java或web中解决所有路径问题
Java开发中使用的路径,分为两种:绝对路径和相对路径.归根结底,Java本质上只能使用绝对路径来寻找资源.所有的相对路径寻找资源的方法,都不过是一些便利方法.不过是API在底层帮助我们构建了绝对路径 ...