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 @font-face属性使用指南
Dec 12 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP+DBM的同学录程序(1)
2006/10/09 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
jQuery Clone Bug解决代码
2010/12/22 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
python简单判断序列是否为空的方法
2015/06/30 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
给校长的一封建议书
2014/03/12 职场文书
优质服务口号
2014/06/11 职场文书
土建施工员岗位职责
2014/07/16 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2016情人节宣传语
2015/07/14 职场文书