开发者社区> 笔记侠> 正文

H5实现多图片预览上传,可点击可拖拽控件介绍

简介: 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。 先看看他的样式: 选择图片后: $(function(){ // 初始化插件 $("#demo").zyUpload({ width : "650px",
+关注继续查看

在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。

先看看他的样式:



选择图片后:



$(function(){
	// 初始化插件
	$("#demo").zyUpload({
		width            :   "650px",                 // 宽度
		height           :   "400px",                 // 宽度
		itemWidth        :   "120px",                 // 文件项的宽度
		itemHeight       :   "100px",                 // 文件项的高度
		url              :   "/upload/UploadAction",  // 上传文件的路径
		multiple         :   true,                    // 是否可以多个文件上传
		dragDrop         :   true,                    // 是否可以拖动上传文件
		del              :   true,                    // 是否可以删除文件
		finishDel        :   false,  				  // 是否在上传文件完成后删除预览
		/* 外部获得的回调接口 */
		onSelect: function(files, allFiles){                    // 选择文件的回调方法
			console.info("当前选择了以下文件:");
			console.info(files);
			console.info("之前没上传的文件:");
			console.info(allFiles);
		},
		onDelete: function(file, surplusFiles){                     // 删除一个文件的回调方法
			console.info("当前删除了此文件:");
			console.info(file);
			console.info("当前剩余的文件:");
			console.info(surplusFiles);
		},
		onSuccess: function(file){                    // 文件上传成功的回调方法
			console.info("此文件上传成功:");
			console.info(file);
		},
		onFailure: function(file){                    // 文件上传失败的回调方法
			console.info("此文件上传失败:");
			console.info(file);
		},
		onComplete: function(responseInfo){           // 上传完成的回调方法
			console.info("文件上传完成");
			console.info(responseInfo);
		}
	});
});

直接在demo.js里修改配置,url :   "/upload/UploadAction" 放你的图片上传action,这个控件只是前台处理,后台的上传还得自己写,

参考:http://blog.csdn.net/weixin_36380516/article/details/69898336

这个控件大体就是这样,如果有需要的可以下载(0积分):http://download.csdn.net/detail/weixin_36380516/9820594


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
实例介绍Cocos2d-x精灵菜单和图片菜单
<h3><span style="font-size:14px;font-weight: normal;"><span style="color: windowtext;">精灵菜单类是</span><span style="color: windowtext;">MenuItemSprite</span><span style="color: windowtext;">,图片菜单类是</sp
1341 0
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
手把手教你开发带预览的 Vue 图片上传组件,即图片上传管理后台。只要你跟本教程一步一步走,最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传图片应用,后端我们使用 Node.js + Express + Multer 来搭建后端上传图片的后端处理。
59 0
silverlight中顺序/倒序异步加载多张图片
相册/图片切换广告等很多常用小应用中,服务器返回一组图片的uri,然后silverlight利用WebClient异步加载,如果要严格控制加载顺序的话,可以利用Stack(堆栈)或Queue(堆栈)处理,思路:不要全部一起加载,先加载第一个,在完成的异步回调过程中,继续发起一下次异步。
675 0
函数计算+云市场实现手机号归属地和图片爬虫系统设计
本文通过两个无服务器的实用案例来演示无服务器架构的真正魅力,case1:通过函数计算+Http触发器+云市场三者结合起来,提供一个能查询手机号归属地天气预报,case2,通过输入指定的网站抓取图片的案例,这两个例子都不需要配置WEB容器、不需要搭建运行环境、不需要购买负载均衡,通过简单配置和业务代码即可完成一个高可用高弹性无服务器的应用服务。
1742 0
利用Tess4J实现图片识别
一、下载 1.进入官网下载页面 https://sourceforge.net/projects/tess4j/   2.点击download   3.下载后解压,目录如下,圈出的三个文件夹是需要用到的   二、使用Tess4J 1.
1478 0
巧用CSS3滤镜实现图片不同渲染效果
本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
1074 0
OAF_文件系列4_实现OAF上传显示数据库动态图片Image(案例)
20150805 Created By BaoXinjian 一、摘要 实现的过程 Step1. 通过数据库中BLOB栏位保存Image类型图片 Step2. 将BLOB类型Item通过messageupload上传至Database VO BLOB中 Step3.
1025 0
+关注
笔记侠
Java开发,喜欢交流,个人网站:https://www.javazhiyin.com/ 欢迎多多交流
158
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载