香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

建站新闻

html5实现多图片预览上传及点击可拖拽控件
一佰互联网站建设(www.yinxi.net) 发布时间:2019-04-20 08:55:53 浏览数: 20
0

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

先看看他的样式:

选择图片后:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持网页设计。

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

上一篇:Html5 APP中监听返回事件处理的方法示例
下一篇: 微信html5页面调用第三方位置导航的示例
[返回新闻列表]

相关新闻more

17
05月
跟着广州巅云建站设计走您的网站有奔头!-ww

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>详情

18
04月
Google是如何做代码审查的? 代码审查有

Google是一个非常优秀的公司。他们做出了很多令人称赞的东西—既是公司外部,人们可以看到的东西,也是公司内部。有一些在公司内部... >>详情

30
03月
微信小程序2019年的新一波浪潮

简介:在如今这个移动互联网时代,技术创新将带来商业模式的完全颠覆,伴随着小程序的诞生,移动互联网行业也迎来了新一波的浪潮。目前小程序的发展前... >>详情

20
05月
【大连阡陌网】SEO赚钱经验方法_巅云建站

【大连阡陌网】SEO 很多人不知道SEO居然能够,很多SEO大神都是在默默发大财,你还在SEO外包公司做你的SEO专员吗?快来看看SEO... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号