JS文件/图片从电脑里面拖拽到浏览器上传文件/图片


Posted in Javascript onMarch 08, 2017

1.效果展示

JS文件/图片从电脑里面拖拽到浏览器上传文件/图片

2.html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./upload.js"></script>
  <style>
    #drop img{width: 100px;height: 100px;margin: 10px;}
  </style>
</head>
<body onload="test()">
  <div id="drop" style="width: 500px;height: 400px;background: #eee;margin: 0 auto;">
    <div style="clear: both;"></div>
  </div>
  <p style="text-align: center"><button onclick="up()">提交</button></p>
</body>
</html>

3.引入js

js地址 :http://files.cnblogs.com/files/jiebba/upload.js

4.引用插件

var formData = new FormData(),list={}
   function test() {
     var d = new DragUpLoads()
     d.getDragImage({id:'drop',dropCallback:function (data) {
       if(list[data.name]) return;
       list[data.name] = true
       formData.append("files", data.blob);
       formData.append("asdfas", 'asdfasdf');
       document.getElementById('drop').appendChild(data.img)
       /*
       * 返回img对象,url ,blob对象
       * */
     }})
   }
   function up() {
     console.log(formData)
    /*
    * formData 这个对象即我们要传的值
    * 通过 异步post/get 给后台即可
    * */
   }

以上所述是小编给大家介绍的JS文件/图片从电脑里面拖拽到浏览器上传文件/图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
javascript数组排序汇总
Jul 07 Javascript
JavaScript小技巧整理
Dec 30 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
Vue 父子组件、组件间通信
Mar 08 #Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 #Javascript
vue-resourse将json数据输出实例
Mar 08 #Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 #Javascript
js实现五星评价功能
Mar 08 #Javascript
ionic2 tabs 图标自定义实例
Mar 08 #Javascript
微信小程序 弹窗自定义实例代码
Mar 08 #Javascript
You might like
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
js实现简单的秒表
2020/01/16 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
django queryset相加和筛选教程
2020/05/18 Python
python中round函数如何使用
2020/06/19 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
C语言面试题
2015/10/30 面试题
Linux内核产生并发的原因
2012/07/13 面试题
计算机网络专业推荐信
2013/11/24 职场文书
大四本科生的自我评价
2013/12/30 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
村官个人总结范文
2015/03/03 职场文书
农村老人去世追悼词
2015/06/23 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Django migrate报错的解决方案
2021/05/20 Python
如何解决php-fpm启动不了问题
2021/11/17 PHP