js文件/图片从电脑里面拖拽到浏览器上传文件/图片
1.效果展示
2.html 代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!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.引用插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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 给后台即可 * */ } |
代码仅供参考，具体功能可以自己扩展。
http://www.cnblogs.com/jiebba 我的博客，来看吧！
js文件/图片从电脑里面拖拽到浏览器上传文件/图片的更多相关文章
- JavaScript实现图片拖拽、粘贴上传
前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...
- Java中使用HttpPost上传文件以及HttpGet进行API请求（包含HttpPost上传文件）
Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件) 一.HttpPost上传文件 public static String getSuffix(fi ...
- 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件
使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...
- node.js+react全栈实践-Form中按照指定路径上传文件并
书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文 ...
- Android上传图片到PHP服务器并且支持浏览器上传文件（word、图片、音乐等）
暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...
- python------接口（get请求、post请求）， 图片、歌曲下载，网页返回，上传文件
接口(get请求.post请求 --json), 图片.歌曲下载(context),网页返回(text),上传文件 import requests######################### ...
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题【转】
转自:http://www.iefans.net/ie-shangchuan-bendi-lujing-fakepath/ 在使用<input id="file_upl" t ...
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
在使用<input id="file_upl" type="file" />控件上传文件时,有时会需要获取文件本地路径展示给客户,这时可以通过这样的 ...
- 【TFS 2017】使用浏览器上传文件（TFVC）或者编辑代码，错误提示TF14098，需要对文件有PendChange 权限
从TFS 2015开始,微软在TFS系统中增加了一个非常吸引开发人员的功能,"快速代码编辑器" (Quick Code Editor).使用这个功能,你可以在任何安装了浏览器的设备 ...
随机推荐
- 如何查看Android apk的包名？
有以下四种方法可以查看apk的包名,之后有别的方法,会接着更新文档的. 1. 安装APK包名查看器; 2. 源码AndroidManifest.xml中查看package包名; 3. 利用" ...
- python基础学习笔记——类的约束
⾸先, 你要清楚. 约束是对类的约束. 用一个例子说话: 公司让小明给他们的网站完善一个支付功能,小明写了两个类,如下: class QQpay: def pay(self,money): print ...
- Leetcode26--->Remove Duplicates from Sorted Array(从排序数组中移除相同的元素)
题目: 给定一个排序数组,移除重复出现的元素,保证每个元素最终在数组中只出现一次.返回新数组的长度length; 要求:不能分配额外的一个数组使用,必须使用原地排序的思想,且空间复杂度为O(1) 举例 ...
- 《Python全栈开发指南》第3版 Alex著（LFXC2018）
第一章 Python基础——Python介绍&循环语句 1.1 编程语言介绍 1.2 Python介绍 1.3 Python安装 1.4 第一个Python程序 1.5 变量 1.6 程序交互 ...
- [Offer收割]编程练习赛48
题目1 : 折线中点 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定平面上N个点P1, P2, ... PN,将他们按顺序连起来,形成一条折线. 请你求出这条折线的 ...
- DS博客作业06—图
1.本周学习总结 1.1思维导图 1.2学习体会 2.PTA实验作业 2.1 图着色问题 图着色问题是一个著名的NP完全问题.给定无向图G=(V,E),问可否用K种颜色为V中的每一个顶点分配一种颜色, ...
- iOS----精品开源库-开发强力助攻
30个精品iOS开源库,超强助攻 你不会想错过他们,真的. 我爱开源. 文章的尾部你会看到一个太长不看的版本——一个简单的列表,只有标题和到项目的链接.如果你发现这篇文章是有用的,把它和你的iOS开 ...
- 【P2387】魔法森林（SPFA非正解）
题目链接 不会LCTqwq,看题解似乎SPFA也可以. 把边按a排序,从小到大每加一条边就以b为距离跑一遍SPFA,类似于Kruskal的想法吧…… 貌似是个暴力 (luoguLCT模块的题我都快通过 ...
- 【bzoj】P4407于神之怒加强版（莫比乌斯反演）
题目链接 套路一般的枚举$gcd(i,j)=w$.设$min(n,m)=top$,则有 $\sum\limits_{i=1}^{n}\sum\limits_{j=1}{m}gcd(i,j)$ $=\s ...
- IDA Pro使用技巧及大杂烩
IDA Pro使用技巧及大杂烩 IDA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window). IDA图形视图会有执行 ...