ASP.NET JavaScript无刷新文件上传解决方案

9 浏览量更新于2024-08-31 收藏 59KB PDF 举报

该资源提供了一个ASP.NET与JavaScript结合实现的无刷新文件上传的实例代码。在传统的ASP.NET中，使用Ajax进行无刷新提交时，FileUpload控件无法直接将文件内容作为字符串传递到JavaScript中。为了实现无刷新文件上传，文章介绍了两种方法。第一种方法是利用JavaScript中的ADODB.Stream对象，它允许将文件转换为数据流，然后通过JavaScript上传到服务器。这种方法的优势在于能够上传大文件，并且由于是以数据流的形式传输，可以支持断点续传和显示上传进度等功能。然而，这种方法的缺点是需要客户端浏览器具有较高的安全设置，或者安装特定的ActiveX控件。提供的代码包括一个前端HTML页面（upload.html）、一个JavaScript控制器（upload.js）和一个处理后台请求的页面（Accept.aspx及其对应的CS文件）。在提供的HTML页面（upload.html）中，有一个FileUpload输入框和一个按钮，当用户点击按钮时，会触发JavaScript函数`BeginUpLoadFile`。JavaScript代码（upload.js）部分展示了如何创建和使用ADODB.Stream对象，以及如何初始化和管理上传过程中的变量，如`g_XMLHttp`用于异步请求，`g_Stream`用于处理文件流，`g_SendCount`和`g_TotalCount`追踪已发送和总文件大小，`g_FileSize`存储文件大小。这个实例为开发者提供了一种实现无刷新文件上传的解决方案，尤其适用于需要实时反馈上传进度的场景。不过需要注意的是，由于依赖于ActiveX控件，这种方法可能不适用于所有现代浏览器，尤其是那些默认禁用或不支持ActiveX的浏览器，如Chrome和Firefox。对于跨平台和多浏览器兼容的解决方案，开发者可能需要考虑使用其他技术，如HTML5的File API，或者使用第三方库，如jQuery File Upload或Plupload等。

asp.net javascript 文件无刷新上传实例代码第文件无刷新上传实例代码第1/2页页

在新增数据项的时候，用ajax实现无刷新提交，但上传文件的时候，由于数据类型原因，不能将页面的<asp:FileUpload>中以

字符串值的方式传到js里调用。我一共找到了两个方法予以解决，实现无刷新上传。

第一种方法：利用js的ADODB.Stream，将文件先转换成流，再通过js上传到服务器，这样有个好处就是可以上传超大文件，

并且由于是数据流，可以支持断点续传、方便显示上传进度等人性化功能。唯一的缺点是要客户端浏览器需要设置安全级别，

或者安装相关ActiveX控件（这个控件自己做的，加载到页面中）。

相关代码：

文件有：1个前台页面：upload.html、 1个js控制：upload.js、 1个后台处理页面：Accept.aspx(Accept.aspx.cs)

代码文件如下：

upload.html

代码如下:

</head>

<body>

</div>

</form>

</body>

</html>

upload.js

代码如下:

var g_XMLHttp = null;

var g_Stream = new ActiveXObject(‘ADODB.Stream’);

var g_SendCount = 0;

var g_TotalCount = 0;

var g_FileSize = 0;

var g_UpFileType = 0 ;

var g_BlockSize = 1024 * 100; //每段分为100K

var fileExtName = “” ; //文件后缀名

var g_PauseFlag = false;

var g_BeginTime = null;

var g_guageFlag = false ;

var Nfilename = “” ;

function Init()

{

InitTitleEvent();

BeginUpLoadFile();

}

function MoveGuage()

{

var t_Time = new Date();

var t_OddTime = Math.ceil((t_Time.getTime() – g_BeginTime.getTime()) / g_SendCount * (g_TotalCount – g_SendCount) /

1000);

var t_OddTimeString = ”;

if(t_OddTime >= 3600)

{

t_OddTimeString = Math.floor(t_OddTime / 3600) + ‘时’;

t_OddTime %= 3600;

}

if(t_OddTime >= 60)

{

t_OddTimeString += Math.floor(t_OddTime / 60) + ‘分’;

t_OddTime %= 60;

}

document.all.lblLeavingsTime.innerText = t_OddTimeString + t_OddTime + ‘秒’;

}

//第1个参数表示上传的类型，为命名新文件提供参考

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38651540

粉丝: 5
资源: 914

ASP.NET JavaScript无刷新文件上传解决方案

asp.net C# 多文件上传带进度条的上传实例

asp.Net mvc4 实例

ASP.NET JavaScript无刷新文件上传解决方案

ASP.NET无刷新分页实例代码详解

swfupload +asp.net 上传文件实例

asp.net 面试+笔试题目第1/2页

asp.net AJAX实现无刷新获得数据

ASP.NET-[聊天留言]ASP.NET+Ajax无刷新评论(留言)系统v1.0.zip

ASP.NET中Jquery+Ajax+Json无刷新分页实例代码详解

ASP.NET+Ajax网站开发典型实例2

最新资源