JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
更新时间：2017年03月08日 16:02:00 作者：小结巴巴吧
这篇文章主要介绍了JS文件/图片从电脑里面拖拽到浏览器上传文件/图片,需要的朋友可以参考下
1.效果展示
2.html 代码：
<!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.引用插件
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 给后台即可
* */
}
以上所述是小编给大家介绍的JS文件/图片从电脑里面拖拽到浏览器上传文件/图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JS解决Date对象在IOS中的“大坑” 以及时间格式兼容问题
这篇文章主要介绍了JS解决Date对象在IOS中的“大坑” 以及时间格式兼容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了JS回调函数基本定义与用法,结合实例形式较为详细的分析了javascript回调函数基本概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了js仿土豆网带缩略图的焦点图片切换效果实现方法,涉及javascript操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
Javascript和Raphael顺便学习了一下,主要是为了实现一个可拖动的矩形同时矩形上还得显示标签，网上关于这方面的知识提的很是于是本人自不量力写了一下，感兴趣的你可不要错过了哈，希望可以帮助到你2013-02-02
这篇文章主要介绍了js实现仿百度汽车频道选择汽车图片展示,实例分析了javascript鼠标事件操作css样式的技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法在本文做下总结，感兴趣的朋友可以参考下2013-10-10
JavaScript常量又称字面常量，是固化在程序代码中的信息。变量的主要作用是存取数据，提供一个存取信息的容器。2009-07-07
这篇文章主要为大家详细介绍了微信小程序商城项目之商品属性值联动选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本文主要为大家介绍了微信小程序中常用的几个表单组件的使用方法，例如：button、CheckBox、input、form等，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了使用原生js封装webapp滑动效果,具有惯性滑动、滑动回弹功能,需要的朋友可以参考下2014-05-05
最新评论