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 我的博客，來看吧！