本篇使用原生JS进行数据传输,使用FileUpload控件上传文件,适配IE。

HTML

 <div class="container">
<div class="row">
<input type="file" formenctype="multipart/form-data" id="files" multiple name="files" /><button class="btn-default" id="UploadButton">点我上传</button>
</div>
</div>

JS

  <script type="text/javascript">
var fileData = new FormData();
fileData.enctype = "multipart/form-data";//给定数据传输格式
window.onload = function () {
document.getElementById("UploadButton").onclick = function () {
debugger;
fileData.append("subject", "哈哈哈");
fileData.append("remark", "");
var files = document.getElementById("files").files;
if (files.length > ) {
for (var i = ; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
}
//var filedata = json.stringify(data);
SpadesQ({
url: '/IENotes/Create',
method: 'POST',
async: false,
contentType: false,
processData: false,
data: fileData,
success: function (result) {
alert(result);
},
error: function (error) {
alert(error);
}
});
}
}
</script>
用原生JS封装了一个简易的Ajax
/*封装Ajax函数
@param {string} opt.type http 连接的方式 包括POST、GET
@param {string} opt.url 请求的地址
@param {boolean} async 是否异步
@param {object} otp.data 请求发出的数据
@param {boolean} otp.contentType 传输中的数据格式
@param {boolean} otp.processData 是否将数据序列化
@param {function} success 请求成功后的回调
@param {function} error 出错后的回调
*/
function SpadesQ(opt) {
debugger;
opt = opt || {};
opt.method = (opt.method || 'GET').toUpperCase();
opt.url = opt.url || '';
opt.async = opt.async || false;
opt.contentType = opt.contentType || false; //contentType设为false,不修对象改格式
opt.processData = opt.processData || false;//不对数据对象做序列化操作
opt.data = opt.data ||{};
opt.success = opt.success || function () { };
opt.error = opt.error || function () { };
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest;
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);//因为此处是为了完整的将FormData对象传送至到action中,所以没有对数据做任何改变,有需要对数据格式进行处理的另当别论。
//xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charest=utf-8');
xmlHttp.send(opt.data);
} else if(opt.method.toUpperCase()==='GET') {
xmlHttp.open(opt.method, opt.url + '?' + opt.data, opt.async);
xmlHttp.send();
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.status == && xmlHttp.readyState == ) {
opt.success(xmlHttp.responseText);
} else {
opt.error(xmlHttp.responseText);
}
};
}

后台逻辑

 public static bool CommonFile(){
var files = Request.Files.AllKeys.Distinct(); //将传输过来的files进行去重
if (files != null)
{
foreach (string each in files)
{
HttpPostedFileBase file = Request.Files[each] as HttpPostedFileBase; //注意,这里有一个对象类型转换的过程,需要将传过来的对象转换成HttpPostedFileBase对象
if (file != null)
{
var InputFileName = Path.GetFileName(file.FileName);
string str4 = AppDomain.CurrentDomain.BaseDirectory; //获取基目录,它由程序集冲突解决程序用来探测程序集。
var ServerSavePath = Path.Combine(Server.MapPath("~/Uploads/") );
if (!Directory.Exists(ServerSavePath))//检查路径是否存在
{
Directory.CreateDirectory(ServerSavePath);
}
var SavePath = Path.Combine(ServerSavePath ,InputFileName);
file.SaveAs(SavePath);
}
}
return true;
}
else
{
return false;
}
}

点我

感谢您的观看,您的

.NET中的FileUpload控件的使用-原生JS(二)的更多相关文章

  1. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...

  2. .NET中的FileUpload控件的使用-Jquery(一)

    FileUpload在HTML中是个常用的基础控件,在涉及到上传各种格式的文件时候都会用到:笔者前段时间正好用到它做上传功能,记录下来做一些累积, 前端到后台用的是的Jquery中的Ajax进行数据传 ...

  3. FileUpload控件使用初步

    FileUpload控件使用初步   FileUpload控件使用初步: 1.实现文件上传 protected void btnSubmit_click(object sender, EventArg ...

  4. asp.net中的ListBox控件添加双击事件

    问题:在Aspx页里的ListBox A中添加双击事件,将选中项添加到另一个ListBox B中,双击ListBox B中的选中项,删除当前选中项 页面: <asp:ListBox ID=&qu ...

  5. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

  6. 关于ASP.NET中fileupload控件的缺点

    一.首我来理一理“FileUpload”控件的工作大概原理: FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本 ...

  7. C# 自定义FileUpload控件

    摘要:ASP.NET自带的FileUpload控件会随着浏览器的不同,显示的样式也会发生改变,很不美观,为了提高用户体验度,所以我们会去自定义FileUpload控件 实现思路:用两个Button和T ...

  8. webform FileUpload控件实例应用 上传图片

    首先在根目录下建一个"images"文件: HTML: <form id="form1" runat="server"> < ...

  9. WebForm之FileUpload控件(文件上传)

    FileUpload控件要与Button.LinkButton.ImageButton配合使用 FileUpload控件的方法及属性: 1.SaveAs("要上传到服务器的绝对路径" ...

随机推荐

  1. Future设计模式

    一.什么是Future模型: Future模式是多线程开发中非常常见的一种设计模式,它的核心思想是异步调用.这类似我们网上订餐订座,只要一个电话,客服就告诉我们已经预定成功(实际客服MM啥都还没做好) ...

  2. ORA-22858: 数据类型的变更无效 varchar2类型转换为clob类型

    今天遇到varchar2类型数据不够大,需改为clob类型.Oracle中,如果一个列的类型为varchar2,那么它不能直接转换为clob类型.可以通过间接的方式来修改. 就是把原来的字段删掉,重新 ...

  3. C#控制台自定义背景颜色,字体颜色大全

    效果: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  4. Html使用Iframe无刷新上传文件,后台接收

    html代码:我是发送请求到teacher_center.aspx,不是到.ashx一般处理程序里,需要加 runat="server",有空我再试试发送请求到 .ashx 里 & ...

  5. cookies,sessionStorage 和 localStorage 的区别

    请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...

  6. python yaml

    一.安装PyYAML http://pyyaml.org/ 二.入门参考 http://www.cnblogs.com/c9com/archive/2013/01/05/2845539.html ht ...

  7. Codeforces 681C. Heap Operations 优先队列

    C. Heap Operations time limit per test:1 second memory limit per test:256 megabytes input:standard i ...

  8. 还不好好读书吗?清华3D录取通知书出炉,还能动!

    近日,清华大学2018录取通知书“亮相”!看完后,网友直呼:哪里可以买到? 打开录取通知书 3D“二校门”跃然纸上 由清华师生共同打造.手工定制.独一无二的2018新版录取通知书来了!在新版录取通知书 ...

  9. DNS/BIND in Debian

    Debian official document:http://www.debian.org/doc/manuals/network-administrator/ch-bind.html Buildi ...

  10. 从一个流中读数据--fread

    头文件:#include<stdio.h> 函数原型:int fread(void *ptr,int size,int nitems,FILE *stream); 参数说明: ptr:用于 ...