FineUploader使用心得

最新推荐文章于 2024-09-25 15:15:38 发布

jxiaoliu

最新推荐文章于 2024-09-25 15:15:38 发布

阅读量1.2w

点赞数 1

文章标签： FineUploader Javascript 文件上传 Java

本文链接：https://blog.csdn.net/jxiaoliu/article/details/40392089

版权

本文介绍了FineUploader的使用，包括所需代码、Java后台处理、参数解析和删除文件功能。FineUploader是一个纯JavaScript实现的文件上传组件，支持Ajax上传且不刷新页面。文章提供了关键配置选项的解释，并给出了后台处理文件上传和删除的Java代码示例。

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

近来做一个需要有附件管理的公告版，于是发现了这个FineUploader，纯Javascript实现，Ajax方式，上传文件不刷新页面，不依赖于任何第三方库，非常好用。但刚开始使用时google了很多资料，包括官方的文档和demo。发现网上的很多资料要么很老，要么对我参考意义不大。至这个功能完成，写下自己的心得，给自己留点记录，如果能对别人有点参考价值则更佳。

FineUploader官方网站：http://fineuploader.com/ ，打包好的js是要收费的，价格还不便宜。

开源的项目：https://github.com/FineUploader/fine-uploader

本文中用到的FineUploader已上传到http://download.csdn.net/detail/jxiaoliu/8071341（已精简，去掉了所有用不到的文件，包括模板）

一、FineUploader所需的代码

首先，引入必须的js文件和css

<link href="<%=request.getContextPath()%>/fineuploader5/fineuploader-5.0.2.css" rel="stylesheet"/>
<script src="<%=request.getContextPath()%>/fineuploader5/fineuploader-5.0.2.js" type="text/javascript"></script>

OK，就这两个文件就可以了。

接下来，就可以在js中实例化这个uploader：

var submitFile = false;//用于控制仅在”提交“按钮按下时提交文件
var uploader = null;
function createUploader() {
	uploader = new qq.FineUploader({
		element: document.getElementById('fine-uploader'),
		autoUpload: false,
	      	request: {
	        	endpoint: '<%=request.getContextPath()%>/updownfile/UploadFile?op=add'
	      	},
	      	session: {
	      		endpoint: '<%=request.getContextPath()%>/manage/Bulletin?op=getattach',
	      		params: {'id': ${bulletin.id}}
	      	},
	      	deleteFile: {
	      		enabled: true,
	      		endpoint: '<%=request.getContextPath()%>/manage/Bulletin?op=del',
	      		method: 'POST',
	      		forceConfirm: true,
	      		confirmMessage: '确定要删除文件 {filename} 吗？ 不可恢复！！',
	      		deletingFailedText: '删除失败！'
	      	},
	      	editFilename: {
	      	       enabled: false
	      	},
	      	callbacks: {
	      		onAllComplete:  function(successIDs, failIDs)  {
	      			if(submitFile)