js实现文件上传—带进度条

最新推荐文章于 2024-07-25 14:20:43 发布

追梦的晓米

最新推荐文章于 2024-07-25 14:20:43 发布

阅读量1.1w

点赞数 1

分类专栏： --------【SmartCampus】

本文链接：https://blog.csdn.net/lzj3462144/article/details/51926838

版权

这篇博客讲述了如何使用JS实现文件上传并显示进度条功能，针对视频等大文件上传时用户体验不佳的问题。作者介绍了尝试不同解决方案的过程，包括使用一般处理程序（ ashx ）和后台封装的JS，以及遇到的IP地址传值和CSS样式调整等问题，最终成功实现功能。同时，作者反思了问题解决过程中的思考和学习收获。

摘要由CSDN通过智能技术生成

上篇博客主要介绍了用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&#