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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
Vue实现购物车功能
2017/04/27 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
大学共青团员个人自我评价
2014/04/16 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2014年残联工作总结
2014/11/21 职场文书
三好学生评语大全
2014/12/29 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书