`
轩辕_子靖
  • 浏览: 15065 次
社区版块
存档分类
最新评论

JQuery异步上传下载插件——Attachment UI

阅读更多
最近刚刚完成了一个可以用于异步上传下载的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. 文件上传(带进度条)
    插件初始化如下:
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
  • 大小: 27.3 KB
  • 大小: 27.9 KB
  • 大小: 27 KB
  • 大小: 20.3 KB
  • 大小: 28.8 KB
分享到:
评论

相关推荐

    struts+hibernate实现文件上传、下载,以二进制存于数据库

    这个插件允许用户在客户端选择文件后,通过Ajax异步方式将文件数据发送到服务器。在`uploadify`的配置中,我们需要指定上传的URL(即Struts的Action),文件类型限制,以及上传成功后的回调函数等参数。前端页面需要...

    asp.net mvc+easyui附件上传

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,如表格、下拉框、对话框等,可以方便地与ASP.NET MVC结合使用,实现界面的美化和交互。在本教程中,我们将探讨如何使用ASP.NET MVC和EasyUI实现附件上传功能。 ...

    基于PHP的AJAX实现无刷新下载文件实例(MySQL)源码.zip

    例如,设置`Content-Type`为文件的MIME类型,`Content-Disposition`为"attachment"以启动下载对话框。 - AJAX请求完成,前端接收到响应,可以更新UI提示用户下载已经开始,或者显示其他反馈信息。 5. **源码结构**...

    Easyui+SpringMVC导出Excel

    首先,EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如表格、树、下拉框等,用于快速构建美观且响应式的Web应用界面。在导出Excel的场景中,EasyUI通常用来展示数据,并提供导出按钮触发导出操作。 ...

    asp.net的文件管理程序

    UI设计通常会包含文件和目录的列表视图,搜索框,操作按钮等元素。可以使用HTML和CSS创建静态布局,再结合JavaScript和jQuery进行交互增强。若使用ASP.NET MVC,可以使用Razor视图引擎;在Web Forms中,可以使用...

    C#打印EXCEL(三)

    System.Web.UI.HtmlTextWriter oHtmlTextWriter = new System.Web.UI.HtmlTextWriter(oStringWriter); oHtmlTextWriter.WriteLine(RedContro()); Response.Write(oStringWriter.ToString()); Response.End(); ...

Global site tag (gtag.js) - Google Analytics