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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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函数
2010/01/11 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python3开发环境搭建详细教程
2020/06/18 Python
python连接mysql有哪些方法
2020/06/24 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
Python实现粒子群算法的示例
2021/02/14 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
党员个人剖析材料(四风问题)
2014/10/07 职场文书
社区元宵节活动总结
2015/02/06 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL