Excel文件一键上传并解析完成数据批量导入数据库

原来做文件上传的时候，都是有一个输入框，点击上传按钮，先浏览文件，选择文件后，把文件的路径保存到form表单中，最后通过form表单提交到服务端。这样的界面不是很美观。为了用户有更好地体验(UE)，现在的大多数系统都是采用一键文件上传，用户点击上传按钮，选择要上传的文件，确定之后，文件就直接上传了，不需要提供额外的form表单，而且可以实现页面文件上传无刷新。

文件上传和一键文件上传的原理

文件上传需要具备的条件：

客户端：
1、 Form 表单编码方式 multipart/form-data
2、 提交方式必须为 post
3、 上传文件对应 input type=”file” 元素要提供 name 属性

服务端：

使用Struts2进行文件上传

struts2-default.xml 配置

FileUploadInterceptor拦截器已经被配置 defaultStack 中，这个拦截器对Apache commons-fileupload文件上传工具包进行了封装，使用更便捷。

客户端–使用jQuery ocupload插件实现一键上传

Ocupload即One-click upload，一键上传。

一键上传原理

插件下载的官网现在不能正常访问，插件在文章末提供的示例项目中。示例项目仅供大家参考！

首先在项目中导入这个插件，并在页面中进行引用。

注：由于这个插件是jQuery的插件，所在需要在引入这个插件之前，先在页面中引入jQuery文件。

插件的使用

官方示例：

$(element).upload({ 
        name: 'file',  //<input type='file' name='file'/> 插件的默认值是file
        action: '',   //请求服务器的路径
        enctype: 'multipart/form-data',  //mime类型 ，插件默认的即可
        params: {},   //请求额外传递的参数，一般不用设置
        autoSubmit: true,   //是否在选择文件后自动提交form表单
        onSubmit: function() {},  //在提交form表单之前进行的操作
        onComplete: function() {},  //完成文件上传后，进行的操作
        onSele