JQuery异步上传下载插件——Attachment UI
程序员文章站
2022-07-12 16:51:36
...
最近刚刚完成了一个可以用于异步上传下载的jquery插件,取名为Attachment UI,下面做一下简单介绍,后面附有源码,希望大神多多指点。
Attachment UI是一款轻量级、可扩展、便于使用的jQuery插件。可实现如下功能:
1. 文件上传(支持进度条)。
2. 设置文件信息。
3. 根据json数组格式字符串显示文件。
4. 文件下载。
5. 可配置滚动条。
缺点与不足:
Attachment UI只使用了FormData来作为向后台提交的form表单,因此不支持一些低版本浏览器和IE浏览器。 异步提交上传文件的表单,使用的是XmlHttpRequest对象,而在 IE 5 和 IE 6 中,必须使用特定于 IE 的 ActiveXObject。
API
1.用户可通过生成的插件直接调用的方法:
1) getAttachmentsJsonStr() 返回当前插件中所有文件的json格式字符串。
2) removeAllAttachments() 返回当前插件中所有文件的个数。
3) removeAllAttachments() 移除当前插件中所有的文件。
调用方法:(以getAttachmentsJsonStr为例)
var attachmentUIObj = $obj.attachmentUI({......});
attachmentUIObj.getAttachmentsJsonStr();//得到当前插件中所有文件的json格式字符串。
2.用户可以重写覆盖的方法:
1) getDateStr(date)
根据实际项目要求,按照一定格式返回文件上传时间。
2) userDefineField($content, options, fileJson)
用户自定义页面元素(如输入框、下拉列表、单选按钮……),来设置或显示文件的信息。$content 为该元素的父节点,即在列表中的某个节点; options为用户对插件设置的参数;fileJson为当前文件的json对象。
重写方法:(以getDateStr)为例
$.fn.attachmentUI.getDateStr = function(date) {......}
使用实例:
1. 文件上传(带进度条)
插件初始化如下:
2. 文件上传 + 滚动条
插件初始化方法与上面基本相同,将maxLine设为3,即附件数目大于3时显示滚动条
3. 数据源 + 上传附件 + 滚动条(数据源为json数组格式的字符串)
4. 显示文件信息 + 文件下载
5. 自定义属性
插件源码:
在AttachmentUI.rar中,attachmentUI-info文件夹中包含了对该插件的说明,attachmentUIDemo文件夹中包含了该插件的Demo,csslib文件夹是该插件的样式,img文件夹中是该插件所用的图片,script文件夹中是该插件的源代码,后台代码文件夹中是Demo中所用的后台代码(Struts2)。
联系我:
由于水平有限以及时间仓促,该插件还有许多缺陷和不足,希望路过的大神多多指点批评。如果您有什么问题或建议,可以联系我:
QQ:544825617
E-mail:qustmp@163.com
Attachment UI是一款轻量级、可扩展、便于使用的jQuery插件。可实现如下功能:
1. 文件上传(支持进度条)。
2. 设置文件信息。
3. 根据json数组格式字符串显示文件。
4. 文件下载。
5. 可配置滚动条。
缺点与不足:
Attachment UI只使用了FormData来作为向后台提交的form表单,因此不支持一些低版本浏览器和IE浏览器。 异步提交上传文件的表单,使用的是XmlHttpRequest对象,而在 IE 5 和 IE 6 中,必须使用特定于 IE 的 ActiveXObject。
API
1.用户可通过生成的插件直接调用的方法:
1) getAttachmentsJsonStr() 返回当前插件中所有文件的json格式字符串。
2) removeAllAttachments() 返回当前插件中所有文件的个数。
3) removeAllAttachments() 移除当前插件中所有的文件。
调用方法:(以getAttachmentsJsonStr为例)
var attachmentUIObj = $obj.attachmentUI({......});
attachmentUIObj.getAttachmentsJsonStr();//得到当前插件中所有文件的json格式字符串。
2.用户可以重写覆盖的方法:
1) getDateStr(date)
根据实际项目要求,按照一定格式返回文件上传时间。
2) userDefineField($content, options, fileJson)
用户自定义页面元素(如输入框、下拉列表、单选按钮……),来设置或显示文件的信息。$content 为该元素的父节点,即在列表中的某个节点; options为用户对插件设置的参数;fileJson为当前文件的json对象。
重写方法:(以getDateStr)为例
$.fn.attachmentUI.getDateStr = function(date) {......}
使用实例:
1. 文件上传(带进度条)
插件初始化如下:
var attachmentFields = [ { fieldType:"text",//该列的类型,text为文本类型 fieldName:"File Name",//表头显示的名字 fieldKey:["fileName", "fileSize", "uploadTime"],//该列在json对象中的key值 uploadKey:["name", "fileSize", "uploadTime"],//插件内部对应的属性 fieldWidth:380 //该列的宽度 }, { fieldType:"progress",//progress为滚动条 fieldName:"Progress bar", fieldWidth:150 }, { fieldType:"checkbox",//checkbox表示该列为复选框 fieldName:"Public", fieldKey:["isPublic"], defaultValue:[1], fieldWidth:60 }, { fieldType:"delete",//delete表示该列为删除按钮 fieldName:"Action", fieldWidth:100 } ]; var attachmentUIObj1 = $("#chooseButton1").attachmentUI({ fields:attachmentFields, isNeedUpload : true,//是否需要上传 fileTagName : "myFile",//在后台代码中对应的对象名 uploadUrl : "../uploadFileAction",//上传地址 $attachmentContent : $("#attachment-content1")//附件列表所在的父节点 });
2. 文件上传 + 滚动条
插件初始化方法与上面基本相同,将maxLine设为3,即附件数目大于3时显示滚动条
var attachmentUIObj2 = $("#chooseButton2").attachmentUI({ fields:attachmentFields, isNeedUpload : true, fileTagName : "myFile", uploadUrl : "uploadAction", $attachmentContent : $("#attachment-content2"), maxLine:3 });
3. 数据源 + 上传附件 + 滚动条(数据源为json数组格式的字符串)
var attachmentUIObj2 = $("#chooseButton2").attachmentUI({ fields:attachmentFields, isNeedUpload : true, fileTagName : "myFile", uploadUrl : "uploadAction", $attachmentContent : $("#attachment-content2"), maxLine:3, attachmentsJsonstr : "[{'fileName':'DSCN6656.JPG','fileSize':'2.68 MB','uploadTime':'2012-12-8','isPublic':'1'}, {'fileName':'DSCN6655.JPG','fileSize':'2.60 MB','uploadTime':'2012-12-8','isPublic':'0'}]" });
4. 显示文件信息 + 文件下载
var attachmentFields4 = [ { fieldType:"text", fieldName:"File Name", fieldKey:["fileName", "fileSize", "uploadTime"], uploadKey:["name", "fileSize", "uploadTime"], fieldWidth:380, }, { fieldType:"selectResult", fieldName:"Result", fieldKey:["isPublic"], fieldWidth:100 }, { fieldType:"download", fieldName:"Download", downloadPathKey:"filePath", fileNameKey:"fileName", fieldWidth:100 } ]; var attachmentUIObj4 = $("#attachment-content4").attachmentUI({ fields:attachmentFields4, $attachmentContent : $("#attachment-content4"), downloadUrl : "../downloadFile", maxLine:3, attachmentsJsonstr : "[{'fileName':'JQuery.pdf','fileSize':'2.68 MB','uploadTime':'2012-12-8','isPublic':'1','filePath':'//upload//JQuery.pdf'}," + " {'fileName':'jquery-1.7.2.js','fileSize':'2.60 MB','uploadTime':'2012-12-8','isPublic':'0','filePath':'//upload//jquery-1.7.2.js'}," + " {'fileName':'spring_MVC.pdf','fileSize':'2.69 MB','uploadTime':'2012-12-8','isPublic':'1','filePath':'//upload//spring_MVC.pdf'}," + " {'fileName':'DSCN6130.JPG','fileSize':'2.70 MB','uploadTime':'2012-12-8','isPublic':'0','filePath':'//upload//DSCN6130.JPG'}]" });
5. 自定义属性
var attachmentFields5 = [ { fieldType:"text", fieldName:"File Name", fieldKey:["fileName", "fileSize", "uploadTime"], uploadKey:["name", "fileSize", "uploadTime"], fieldWidth:380, }, { fieldType:"progress", fieldName:"Progress bar", fieldWidth:200 }, { fieldType:"userDefine", fieldName:"Information", fieldWidth:120 }, { fieldType:"delete", fieldName:"Action", fieldWidth:100 } ]; $.fn.attachmentUI.getDateStr = function(date) { return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate(); } $.fn.attachmentUI.userDefineField = function($content, options, fileJson) { var $inputField = $('<input type="text">').appendTo($content); $inputField.width(100); $inputField.css("margin-left", "10px"); } var attachmentUIObj5 = $("#chooseButton5").attachmentUI({ fields:attachmentFields5, isNeedUpload : true, fileTagName : "myFile", uploadUrl : "uploadAction", $attachmentContent : $("#attachment-content5"), maxLine:3 });
插件源码:
在AttachmentUI.rar中,attachmentUI-info文件夹中包含了对该插件的说明,attachmentUIDemo文件夹中包含了该插件的Demo,csslib文件夹是该插件的样式,img文件夹中是该插件所用的图片,script文件夹中是该插件的源代码,后台代码文件夹中是Demo中所用的后台代码(Struts2)。
联系我:
由于水平有限以及时间仓促,该插件还有许多缺陷和不足,希望路过的大神多多指点批评。如果您有什么问题或建议,可以联系我:
QQ:544825617
E-mail:qustmp@163.com