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. 如何用好 Google 等搜索引擎？

    看见知乎上如何用好Google搜索的问题(http://www.zhihu.com/question/20161362),整理一下.感谢知乎大神 1.Choose Which Google? HTTP ...

  2. 打造一款属于自己的web服务器——从简单开始

    距离开篇已经过了很久,期间完善了一下之前的版本,目前已经能够完好运行,基本上该有的功能都有了,此外将原来的测试程序改为示例项目,新项目只需按照示例项目结构实现controller和view即可,详情见 ...

  3. SMP IRQ Affinity

    转:非常有用的方法,调式神器 SMP IRQ Affinity Background: Whenever a piece of hardware, such as disk controller or ...

  4. BZOJ 2687: 交与并

    答案存在于 1.两个互相包含的区间 2.两个互不包含的区间 决策单调性显然 但是这代码很精妙啊,并不知道这个为什么能这样写 #include<cstdio> #include<alg ...

  5. github仓库主页介绍

  6. VMware-Ubuntu入门（1）

    大家都说Linux系统是让程序员用起来更有成就感的系统,我也来体验下: 对于小白鼠的我,并没有直接在电脑上重装Linux系统,而是通过VMware工具搭建Ubuntu虚拟linux环境. 首先展示下V ...

  7. Mysql - 安装及初始化设置

    1. 下载mysql-5.7.13-tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.13-linux-glibc2.5-x8 ...

  8. AtCoder Regular Contest 091

    数学场,做到怀疑人生系列 C - Flip,Flip, and Flip...... Time limit : 2sec / Memory limit : 256MB Score : 300 poin ...

  9. ambari单节点集群塔建

    配置2台机器,发别为ambari01.ambari03.ambari01上部署Ambari-server和Mirror server,另一台机器上部署agent. 一.配置静态IP 运行命令,让配置生 ...

  10. 刷题总结——doing homework again（hdu1789）

    题目: Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot ...