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 3D制作实战案例分析
Sep 18 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
把PHP安装为Apache DSO
2006/10/09 PHP
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
实习教师自我鉴定
2013/09/27 职场文书
标准化管理实施方案
2014/02/25 职场文书
法学求职信
2014/06/22 职场文书
公司领导班子对照材料
2014/08/18 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
热情服务标语
2014/10/07 职场文书
公证处委托书
2015/01/28 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技