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文件/图片从电脑里面拖拽到浏览器上传文件/图片的更多相关文章

  1. JavaScript实现图片拖拽、粘贴上传

    前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...

  2. Java中使用HttpPost上传文件以及HttpGet进行API请求（包含HttpPost上传文件）

    Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件) 一.HttpPost上传文件 public static String getSuffix(fi ...

  3. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  4. node.js+react全栈实践-Form中按照指定路径上传文件并

    书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文 ...

  5. Android上传图片到PHP服务器并且支持浏览器上传文件（word、图片、音乐等）

    暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...

  6. python------接口（get请求、post请求）， 图片、歌曲下载，网页返回，上传文件

    接口(get请求.post请求 --json), 图片.歌曲下载(context),网页返回(text),上传文件   import requests######################### ...

  7. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题【转】

    转自:http://www.iefans.net/ie-shangchuan-bendi-lujing-fakepath/ 在使用<input id="file_upl" t ...

  8. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题

    在使用<input id="file_upl" type="file" />控件上传文件时,有时会需要获取文件本地路径展示给客户,这时可以通过这样的 ...

  9. 【TFS 2017】使用浏览器上传文件（TFVC）或者编辑代码，错误提示TF14098，需要对文件有PendChange 权限

    从TFS 2015开始,微软在TFS系统中增加了一个非常吸引开发人员的功能,"快速代码编辑器" (Quick Code Editor).使用这个功能,你可以在任何安装了浏览器的设备 ...

随机推荐

  1. CentOS 7.0 使用 yum 安装 MariaDB 及 简单配置

    1.安装MariaDB 安装命令 yum -y install MariaDB-server MariaDB-client 安装完成MariaDB,首先启动MariaDB 设置开机启动 接下来进行Ma ...

  2. Java构造器(construtor)与垃圾收集器(GB)

    在Java中,程序员会在乎内存中的两块空间. 堆(heap)和栈(stack). 当java虚拟机启动时, 它会从底层的操作系统取得一块内存, 并且以此块内存来执行java程序. 在Java中, 实例 ...

  3. Java中的数据类型和引用

    JAVA数据类型分primitive数据类型和引用数据类型. Java中的primitive数据类型分为四类八种.primitive也不知道怎么翻译比较贴切, 暂且叫他基本数据类型吧, 其实直接从英文 ...

  4. UVa 10118 记忆化搜索 Free Candies

    假设在当前状态我们第i堆糖果分别取了cnt[i]个,那么篮子里以及口袋里糖果的个数都是可以确定下来的. 所以就可以使用记忆化搜索. #include <cstdio> #include & ...

  5. luogu2123 皇后游戏

    好题. 网上看到的范围是:\(T \leq 10\),$ n \leq 50000$, $ a_i,b_i \leq 10^9$. 我们按照贪心惯常的思路考虑交换相邻的两个人.容易发现,对于相邻的两个 ...

  6. CornerStone使用教程（配置SVN，HTTP及svn简单使用）

    1.SVN配置 假设你公司svn地址为:svn://192.168.1.111/svn/ios,用户名:svnserver,密码:123456 1:填写主机地址 2:如果你的主机地址中有端口号,如为1 ...

  7. tomcat6-endpoint设计

    之前写的一个ppt 搬到博客来

  8. [uiautomator篇][8] 增加应用读取内置存储卡的权限

    1 要在androidmainfest.xml增加权限(这样之后,在设备上的权限才可以点击,不然是灰色) <uses-permission android:name="android. ...

  9. TOJ1840: Jack Straws 判断两线段相交+并查集

    1840: Jack Straws  Time Limit(Common/Java):1000MS/10000MS     Memory Limit:65536KByteTotal Submit: 1 ...

  10. 九度oj 题目1355：扑克牌顺子

    题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...