上篇博客主要介绍了用asp.net控件实现文件上传,功能是实现了,但是有一个问题来了,上传图片还可以,但是上传视频的时候,因为视频比较大,上传的时间比较长,页面长时间无反应,用户体验度就不好。所以要求做一个带有进度功能,所以就要开始了探寻之旅。
在网上搜索,例子倒多,但是加到系统中总是各种各样的问题,最后选取了一个js封装的代码,很完整,最后成功实现了这个功能。
这个主要是后台封装了js文件,调用了一个一般处理程序,简单实现了带进度条的上传。 例子已经上传云盘,需要的可以直接点击下载:https://yunpan.cn/cBGvzZqiQhAuM 访问密码 5d94
1.前台js
<span style="font-family:KaiTi_GB2312;font-size:18px;"> <%--引用相应的js文件,注意一下路径--%>
<script src="fileupload/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="fileupload/jquery.uploadify.js" type="text/javascript"></script>
<script src="fileupload/jquery.uploadify.min.js" type="text/javascript"></script>
<link href="fileupload/uploadify.css" rel="stylesheet" type="text/css" />
<%--调用后台的js的代码--%>
<script type="text/javascript" language="javascript">
$(function () {
$("#file_upload").uploadify({
'auto': false, //是否自动上传
'swf': 'fileupload/uploadify.swf', //上传swf控件,不可更改
'uploader': 'upLoadPic.ashx?IP=<%=txtIP.Text%>', //调用的一般处理程序,传过去参数IP地址
'fileTypeDesc': 'pdf文件或者图像',
'fileTypeExts': '*.pdf;*.jpg;*.jpeg;*.gif;*.png;*.mp4', //文件类型限制,默认不受限制
'buttonText': '<input id="Btn1" type="button" value="浏览文件" />', //按钮文字
'width': 150,
'height&#