html5实现多图片预览上传及点击可拖拽控件


Posted in HTML / CSS onMarch 15, 2018

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

先看看他的样式:

html5实现多图片预览上传及点击可拖拽控件

选择图片后:

html5实现多图片预览上传及点击可拖拽控件

$(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,这个控件只是前台处理,后台的上传还得自己写

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 #HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 #HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 #HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 #HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 #HTML / CSS
详解px单位html5响应式方案
Mar 08 #HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
You might like
操作Oracle的php类
2006/10/09 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
理解javascript async的用法
2017/08/22 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python批量生成本地ip地址的方法
2015/03/23 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python列表切片常用操作实例解析
2019/12/16 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
美国时尚在线:Showpo
2017/09/08 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
出纳岗位职责
2013/11/09 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
霸气队列口号
2014/06/18 职场文书
合伙购房协议样本
2014/10/06 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
Golang 对es的操作实例
2022/04/20 Golang
Django框架模板用法详解
2022/06/10 Python