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. lwqq

    源码安装lwqq 加密保存密码 发送截图

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

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

  3. BZOJ 4552 [Tjoi2016&Heoi2016]排序 ——线段树 二分答案

    听说是BC原题. 好题,二分答案变成01序列,就可以方便的用线段树维护了. 然后就是区间查询和覆盖了. #include <map> #include <cmath> #inc ...

  4. java中文乱码问题解决

    1 处理乱码方式: 1 连接数据库的时候 jdbc.properties:jdbc:mysql://localhost:3306/myproject?useUnicode=true&chara ...

  5. java面试题之happens before原则

    JSR-133使用happens-before的概念来指定两个操作之间的执行顺序.由于这两个操作可以在一个线程内,也可以在不同线程之间.因此,JMM可以通过happens-before关系向程序员提供 ...

  6. BaseResponse

    package common; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; /** * ...

  7. 关于sass和less做自适应网页的区别

    less 可以这么写  @r: 15rem;   body{margin-top:40/@r}; 但是sass这么写会报错 sass应该这么写 $r: 15; body{margin-top:40re ...

  8. xsy 1790 - 不回头的旅行

    from NOIP2016模拟题28 Description 一辆车,开始没油,可以选择一个点(加油站)出发 经过一个点i可加g[i]的油,走一条边减少len的油 没油的时候车就跪了 特别的,跪在加油 ...

  9. bzoj 3881 [Coci2015]Divljak fail树+树链的并

    题目大意 Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: "1 P",Bob往自己的集合里添 ...

  10. c#.net分类上升达人~~~呵呵。。。

    原文发布时间为:2008-11-11 -- 来源于本人的百度文章 [由搬家工具导入] 觉得自己蛮无聊的~~~~~~~~~（>_<)~~~~