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. 妹子图爬取__RE__BS4

    妹子图爬取 页面链接 感谢崔大佬: 原文链接 正则实现代码: import requests import re import os import random class mzitu(): def ...

  2. [转] WEB前端学习资源清单

    常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程 编程类中文书籍索引 深入理解JS系列 前端开发仓库 <JavaScript 闯关记> JavaS ...

  3. bzoj3172 luogu3966 [TJOI2013]单词

    蒟蒻也能写出来的AC代码!这题是AC自动机模板题.插入单词时用一个没出现过的字符隔开就行了. 一些细节请看注释 #include <iostream> #include <cstri ...

  4. 解决前端工程师与UI设计协同工作的问题

    前端工程师与UI设计协同工作主要环节在于设计图与前端界面是否一致.(还原度) 不得不说,设计图与前端界面实现不一致的问题时有发生.(好吧,我经验有限)所以经常写完的前端页面都需要去修改.(特别是做移动 ...

  5. 使用 Button 类在 XNA 中创建图形按钮（九）

    平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐步将自己编写的类上传到托管项目中,没有什么好名字,就叫 WPXN ...

  6. python-安装及配置环境变量

    1.python安装十分简单,直接下载与自己电脑位数匹配的python安装包进行安装即可. 这里提供python27的安装包供大家参考. win-32位: 链接: https://pan.baidu. ...

  7. ACM-ICPC 2018 沈阳赛区网络预赛 J树分块

    J. Ka Chang Given a rooted tree ( the root is node 11 ) of NN nodes. Initially, each node has zero p ...

  8. java EL详解

    转自:http://www.codeceo.com/article/java-el-usage.html 一.EL简介 1.语法结构 ${expression} 2.[]与.运算符 EL 提供.和[] ...

  9. 《分布式对象存储》作者手把手教你写 GO 语言单元测试！

    第一部分:如何写Go语言单元测试 Go语言内建了单元测试(Unit Test)框架.这是为了从语言层面规范写UT的方式. Go语言的命名规则会将以_test.go结尾的go文件视作单元测试代码. 当我 ...

  10. hihoCoder #1343 Stable Members

    题目大意$\newcommand{\SD}{\mathrm{SD}}$ 给定一个 $n+1$ 个点的有向无环图,点从 $0$ 开始编号.无重边.自环,且从每个点 $u$ 都能到达 $0$ 号点.如果每 ...