HTML批量文件上传2——进度条显示

作者：私语茶馆

        非常多的云应用中需要上传文本，包括图片，文件等等，这些批量文件上传，往往涉及到进度条显示，多文件上传等，这里分享一个非常好的案例，来自BootStrapfriendly.com，方便大家开发产品时使用。

        已验证的场景：PHP+JavaScript； Servlet+JavaScript； 使用的环境：Tomcat

 

1.异步上传文件使用的基本概念

1.1.AJAX

进度条本质是用脚本控制ProgressBar的显示，其中会用到AJAX，AJAX有如下特征：

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
• XMLHttpRequest 只是实现 Ajax 的一种方式。

 

1.2. Form

<form id="upload_form" enctype="multipart/form-data" method="post">

enctype=“multipart/form-data”: 指form中包含二进制的文件形式

 

1.3.XMLHttpRequest

        XMLHttpRequest（XHR）对象用于与服务器后端服务做请求交互，可以在不刷新页面的情况下请求特定的URL，获取数据。允许网元在不影响用户操作的情况下，更新页面的局部内容，是AJAX的一种关键使用绩效。

       XMLHttpRequest可以支持多种协议，包括FTP， file等。

        如果需要处理消息事件，可以使用EventSource，如果是全双工的可以是WebSocket。

参考：XMLHttpRequest - Web API | MDN (mozilla.org)

 

1.2.项目结构优化-独立的Scripts脚本

        从项目结构上讲，Script最好是独立文件，可以使用<script src="myscripts.js"></script>来引入，这样可以保持HTML简洁。

        如下图所示：

​

创建Scripts脚本

HTML引用该脚本

 

Script脚本

注意事项：要独立一个InitialLoad，并通过window.οnlοad=initialLoad来指定，如果脚本不起作用，可以检查一下windows.onload有没有设置。

 

2.异步批量上传文件及进度条案例

        这里前台部分直接使用Bootstrapfriedly.com的案例，后台用的是Apach的fileupload组件实现多文件上传，URL部分不同。

2.1. 前台界面

<div class