Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp Net的服务器控件上传文件在简单不过了 通过AjaxToolkit控件实现上传进度也不是什么难事 为什么还要自己辛辛苦苦来 实现呢？我并不否认”拿来主义“ 只是我个人更喜欢凡是求个所以然 本篇将阐述通过Html IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理 希望对你有多帮助

效果图

本文涉及到的知识点 前台用到Html Ajax JQuery JQuery UI

后台用到一般处理程序(IHttpHandler)和一般异步处理程序(IHttpAsyncHandler) 并涉及到”推模式“

一 创建Html网页

在创建的Web工程中添加一个Html文件 命名为UploadFile 在头文件中引入JQuery JQuery UI

<link href="Styles/jquery ui custom css" rel="stylesheet" type=text/css /><script src=Scripts/jquery min js type=text/javascript></script><script src=Scripts/jquery ui custom min js type=text/javascript></script>

关于无刷新文件上传

通过Ajax是不能上传文件的 无刷新上传是靠隐藏的iframe来实现的

<form id="form" target = "frameFileUpload" enctype="multipart/form data"><div id="progressBar" ></div><input type=file id="fileUpload" name=fileUpload /><span id="progressValue"></span><iframe id="frameFileUpload" name=frameFileUpload ></iframe><br /><input type=submit value="上传" id = "submit"/></form>

要将form标签的target属性设置为iframe的id 当然别忘了将form的enctype设置为multipart/form data

<div id="progressBar" class="page_speeder_1512316621"></div>

是用来显示上传文件时的进度条

在JS中加入如下处理

<script type=text/javascript>$(function () { $("#submit") button()$("#fileUpload") button()})</script>

此时效果:

二 实现文件上传

添加一个一般处理程序 命名为UploadFileHandler ashx

lishixinzhi/Article/program/net/201311/14305

后端的责任。

前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在Django中实现需要重载上传文件的函数，在上传时文件是被分成数个MB的chunk处理的，每次都会调用这个上传函数。也就是说，每处理一个chunk就更新uploadedsize，然后浏览器端通过AJAX获取这个值和文件大小

最后用JavaScript渲染到页面上。

前端只能说会用框架和插件干活。前段时间用的百度的webuploader，demo就带进度条的。js代码不多可以看一下，猜测是监听事件。上传是前端和通信协议做的事，后端是写入。在比较传统流和和spring自带的transferto的耗时统称上传时间是不对的，应为写入时间。

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5截图前段模块是bootstarp框架不废话直接来代码spring-mvc配置文件。

nginx话lua可以拿到链接的套接口，读取套接口就可以知道当前上传了多少了。可以看下openresty的lualib/resty/upload.lua。

---