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

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
分享到:
评论

相关推荐

    jquery点击图片放大插件——即插即用.zip

    《jQuery点击图片放大插件——实现简单高效的网页交互体验》 在Web开发中,提供良好的用户体验是至关重要的,其中图片的展示方式就是一种常见的优化点。"jQuery点击图片放大插件"正是为了解决这个问题而设计的,它...

    jQuery异步上传文件插件ajaxFileUpload详细介绍

    主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下

    JQuery异步上传下载

    本文将详细讲解如何利用jQuery实现无刷新的异步上传和下载文件,以及MyEclipse环境中项目的创建与部署。 首先,我们要了解jQuery异步上传的基本原理。在传统的文件上传方式中,用户提交表单时会刷新整个页面,用户...

    图片文件上传回显jQuery插件——插件四

    "图片文件上传回显jQuery插件——插件四"正是针对这一需求设计的工具,它简化了开发者实现这一功能的复杂度,使得图片预览和上传变得更加便捷。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、...

    jquery 异步treeTable树形插件

    《jQuery异步treeTable树形插件详解及应用实践》 在Web开发中,数据的展示方式多种多样,其中树形结构是一种常见的数据组织形式,它能够清晰地呈现出层次关系,便于用户理解和操作。jQuery异步treeTable插件是用于...

    jQuery插件——评分_ui_cookie_放大图

    这里我们关注的“jQuery插件——评分_ui_cookie_放大图”主题,涵盖了几个关键的知识点,包括jQuery插件开发、评分系统实现、用户界面(UI)设计、Cookie管理和图片预览功能。 首先,jQuery插件是jQuery生态系统中...

    jquery批量上传图片插件

    "jQuery批量上传图片插件"是基于jQuery实现的一种功能,旨在为网页应用提供便捷的图片批量上传功能。这个插件通常利用Ajax技术实现异步上传,即在不刷新页面的情况下,用户可以选择多张图片并将其上传到服务器,大大...

    jquery插件——多级菜单

    在这个“jquery插件——多级菜单”项目中,我们可能看到以下关键技术点: 1. **CSS样式和布局**:多级菜单的呈现通常依赖于CSS来实现层次感。通过设置适当的`display`属性(如`none`和`block`),我们可以控制菜单...

    jquery-ui插件

    **jQuery UI插件详解** jQuery UI是一个基于JavaScript的开源库,它是jQuery库的扩展,提供了丰富的用户界面组件和交互效果。这个插件以其强大的功能、易于使用的API和可定制的主题而受到开发者的广泛欢迎。在本文...

    jQueryUI jQueryUI插件 键盘插件

    而“jQueryUI键盘插件”是jQueryUI生态系统中的一个特色组件,主要用于模拟和自定义虚拟键盘。 这个键盘插件允许用户在没有物理键盘的情况下也能进行输入操作,特别适用于移动设备或触摸屏应用。它的主要特点包括:...

    jQuery官方UI插件 jQuery官方UI插件

    jQuery UI 是一个基于 jQuery JavaScript 库的开源项目,它提供了丰富的用户界面组件和交互效果,旨在简化网页的交互设计和视觉呈现。这个插件集合了一系列精心设计、功能强大的组件,如对话框(Dialog)、日期选择...

    jquery弹出悬浮插件webui-popover.zip

    《jQuery弹出悬浮插件WebUI-Popover详解》 在网页开发中,为了提供更好的用户体验,工具提示(Tooltip)和弹出悬浮窗是不可或缺的元素。jQuery弹出悬浮插件WebUI-Popover就是这样一款轻量级的解决方案,它为开发者...

    使用jQuery.form插件,实现完美的表单异步提交

    jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...

    基于jquery的异步上传文件插件,使用了HTML5的FormData对象.zip

    本主题围绕“基于jQuery的异步上传文件插件,使用了HTML5的FormData对象”展开,我们将深入探讨HTML5的FormData对象、jQuery在文件上传中的作用以及如何实现异步文件上传。 首先,HTML5的FormData对象是处理表单...

    JQuery本地文件管理器——界面截图

    JQuery本地文件管理器——界面截图,欢迎大家下载

    jquery插件——手风琴效果

    **jQuery 插件——手风琴效果** 在Web开发中,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。手风琴效果是jQuery插件中常见的一种交互式UI设计,它允许用户通过点击展开或折叠...

    jquery UI&Form 插件下载

    在这个“jQuery UI&Form 插件下载”中,我们可以找到这两个插件的官方版本以及相关的帮助文档,帮助开发者快速上手并实现丰富的交互功能。 **jQuery UI 插件** jQuery UI 是一个基于jQuery的开源库,提供了丰富的...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jQuery UI Datepicker插件timepicker时分秒

    《jQuery UI Datepicker插件与timepicker时分秒扩展详解》 在Web开发中,日期和时间的选择常常是一项必不可少的功能,jQuery UI Datepicker插件是一个非常流行的选择工具,它为用户提供了直观、易于使用的日期选择...

Global site tag (gtag.js) - Google Analytics