拖动多张图片上传功能html5
发布日期: 2013-06-08 00:00:00
点击次数: 8860
点击次数: 8860
大字
小字
非常不错的拖动多图片上传功能
只在Firefox chrome使用哦。
要兼容更强大的，联系我。
Demo:
http://6yang.net/myjavascriptlib/dragupload/
源码：共享
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖动多张图片上传功能html5</title>
<script src="js/jquery-1.8.0.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
img{
border:0;
}
.dashboard_target_box {
width:250px;
height:105px;
border:3px dashed #E5E5E5;
text-align:center;
position:absolute;
z-index:2000;
top:0;
left:0;
cursor:pointer
}
.dashboard_target_box.over {
border:3px dashed #000;
background:#ffa
}
.dashboard_target_messages_container {
display:inline-block;
margin:12px 0 0;
position:relative;
text-align:center;
height:44px;
overflow:hidden;
z-index:2000
}
.dashboard_target_box_message {
position:relative;
margin:4px auto;
font:15px/18px helvetica, arial, sans-serif;
font-size:15px;
color:#999;
font-weight:normal;
width:150px;
line-height:20px
}
.dashboard_target_box.over #dtb-msg1 {
color:#000;
font-weight:bold
}
.dashboard_target_box.over #dtb-msg3 {
color:#ffa;
border-color:#ffa
}
#dtb-msg2 {
color:orange
}
#dtb-msg3 {
display:block;
border-top:1px #EEE dotted;
padding:8px 24px
}
.show{
float:left;
min-width:300px;
border:1px solid red;
margin-top:200px;
min-height:300px;
}
.show img{
max-width:300px;
max-height:300px;
margin-right:5px;
}
</style>
<script>
$().ready(function() {
if ($.browser.safari || $.browser.mozilla) {
$("#dtb-msg1 .compatible").show(),
$("#dtb-msg1 .notcompatible").hide(),
$("#drop_zone_home").hover(function() {
$(this).children("p").stop().animate({
"top": "0px"
},
200);
},
function() {
$(this).children("p").stop().animate({
"top": "-44px"
},
200);
}),
$(document).on({
"dragleave": function(e) {
e.preventDefault(),
$(".dashboard_target_box").removeClass("over");
},
"drop": function(e) {
e.preventDefault();
},
"dragenter": function(e) {
e.preventDefault();
$(".dashboard_target_box").addClass("over");
},
"dragover": function(e) {
e.preventDefault(),
$(".dashboard_target_box").addClass("over");
}
});
var box = document.getElementById("target_box");
box.addEventListener("drop", function(e) {
e.preventDefault();
var fileList = e.dataTransfer.files,
img = document.createElement("img");
for(a in fileList[0]){
//console.log(a + ':' + fileList[0][a]);
}
if (fileList.length == 0) {
$(".dashboard_target_box").removeClass("over");
return;
}
if (fileList[0].type.indexOf("image") === -1) {
$(".dashboard_target_box").removeClass("over");
return;
}
if ($.browser.safari) img.src = window.webkitURL.createObjectURL(fileList[0]);
else if ($.browser.mozilla) img.src = window.URL.createObjectURL(fileList[0]);
else {
var reader = new FileReader;
reader.onload = function(e) {
img.src = this.result,
$(body).append(img);
},
reader.readAsDataURL(fileList[0]);
}
var oldXHR = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function() {
var xhr = oldXHR();
if(xhr instanceof window.XMLHttpRequest) {
xhr.upload.addEventListener('progress', function(e){
$("#dtb-msg3").hide(),
$("#dtb-msg4 span").show(),
$("#dtb-msg4").children("span").eq(1).css({
"width": "0px"
}),
$(".show").html("");
if (e.lengthComputable) {
var loaded = Math.ceil(e.loaded / e.total * 100);
$("#dtb-msg4").children("span").eq(1).css({
"width": loaded * 2 + "px"
});
}
}, false);
xhr.upload.addEventListener('load', function(){
$(".dashboard_target_box").removeClass("over"),
$("#dtb-msg3").show(),
$("#dtb-msg4 span").hide();
}, false);
//xhr.addEventListener('abort', on_abort, false);
}
return xhr;
};
var fd = new FormData;
var arrFile = [];
var _url = 'uploadhtml5.php';
for(var i = 0, length = fileList.length; i < length; i++ ){
fd.append("xfile", fileList[i]);
$.ajax({
type: 'POST',
url: _url,
data: fd,
contentType: false,
dataType: "json",
processData: false
})
.then(function(msg){
// alert(msg.filename);
$(".show").append(msg.img);
},function(e){
});
}
}, false);
} else $("#dtb-msg1 .compatible").hide(),
$("#dtb-msg1 .notcompatible").show();
});
</script>
</head>
<body>
<div id="target_box" class="dashboard_target_box">
<div id="drop_zone_home" class="dashboard_target_messages_container">
<p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">选择你的图片<br>
开始上传</p>
<p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px"> <span class="compatible" style="display:inline">拖动图片到</span><span class="notcompatible" style="display:none">点</span>这里<br>
开始上传图片 </p>
</div>
<p id="dtb-msg3" class="dashboard_target_box_message">选择网络图片</p>
<p id="dtb-msg4" class="dashboard_target_box_message" style="position:relative"> <span style="display:none;width:200px;height:2px;background:#ccc;left:-25px;position:absolute;z-index:1"></span> <span style="display:none;width:0px;height:2px;background:#09F;left:-25px;position:absolute;z-index:2"></span> </p>
</div>
<div class="show">显示图片</div>
</body>
</html>
只在Firefox chrome使用哦。
要兼容更强大的，联系我。
Demo:
http://6yang.net/myjavascriptlib/dragupload/
源码：共享
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖动多张图片上传功能html5</title>
<script src="js/jquery-1.8.0.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
img{
border:0;
}
.dashboard_target_box {
width:250px;
height:105px;
border:3px dashed #E5E5E5;
text-align:center;
position:absolute;
z-index:2000;
top:0;
left:0;
cursor:pointer
}
.dashboard_target_box.over {
border:3px dashed #000;
background:#ffa
}
.dashboard_target_messages_container {
display:inline-block;
margin:12px 0 0;
position:relative;
text-align:center;
height:44px;
overflow:hidden;
z-index:2000
}
.dashboard_target_box_message {
position:relative;
margin:4px auto;
font:15px/18px helvetica, arial, sans-serif;
font-size:15px;
color:#999;
font-weight:normal;
width:150px;
line-height:20px
}
.dashboard_target_box.over #dtb-msg1 {
color:#000;
font-weight:bold
}
.dashboard_target_box.over #dtb-msg3 {
color:#ffa;
border-color:#ffa
}
#dtb-msg2 {
color:orange
}
#dtb-msg3 {
display:block;
border-top:1px #EEE dotted;
padding:8px 24px
}
.show{
float:left;
min-width:300px;
border:1px solid red;
margin-top:200px;
min-height:300px;
}
.show img{
max-width:300px;
max-height:300px;
margin-right:5px;
}
</style>
<script>
$().ready(function() {
if ($.browser.safari || $.browser.mozilla) {
$("#dtb-msg1 .compatible").show(),
$("#dtb-msg1 .notcompatible").hide(),
$("#drop_zone_home").hover(function() {
$(this).children("p").stop().animate({
"top": "0px"
},
200);
},
function() {
$(this).children("p").stop().animate({
"top": "-44px"
},
200);
}),
$(document).on({
"dragleave": function(e) {
e.preventDefault(),
$(".dashboard_target_box").removeClass("over");
},
"drop": function(e) {
e.preventDefault();
},
"dragenter": function(e) {
e.preventDefault();
$(".dashboard_target_box").addClass("over");
},
"dragover": function(e) {
e.preventDefault(),
$(".dashboard_target_box").addClass("over");
}
});
var box = document.getElementById("target_box");
box.addEventListener("drop", function(e) {
e.preventDefault();
var fileList = e.dataTransfer.files,
img = document.createElement("img");
for(a in fileList[0]){
//console.log(a + ':' + fileList[0][a]);
}
if (fileList.length == 0) {
$(".dashboard_target_box").removeClass("over");
return;
}
if (fileList[0].type.indexOf("image") === -1) {
$(".dashboard_target_box").removeClass("over");
return;
}
if ($.browser.safari) img.src = window.webkitURL.createObjectURL(fileList[0]);
else if ($.browser.mozilla) img.src = window.URL.createObjectURL(fileList[0]);
else {
var reader = new FileReader;
reader.onload = function(e) {
img.src = this.result,
$(body).append(img);
},
reader.readAsDataURL(fileList[0]);
}
var oldXHR = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function() {
var xhr = oldXHR();
if(xhr instanceof window.XMLHttpRequest) {
xhr.upload.addEventListener('progress', function(e){
$("#dtb-msg3").hide(),
$("#dtb-msg4 span").show(),
$("#dtb-msg4").children("span").eq(1).css({
"width": "0px"
}),
$(".show").html("");
if (e.lengthComputable) {
var loaded = Math.ceil(e.loaded / e.total * 100);
$("#dtb-msg4").children("span").eq(1).css({
"width": loaded * 2 + "px"
});
}
}, false);
xhr.upload.addEventListener('load', function(){
$(".dashboard_target_box").removeClass("over"),
$("#dtb-msg3").show(),
$("#dtb-msg4 span").hide();
}, false);
//xhr.addEventListener('abort', on_abort, false);
}
return xhr;
};
var fd = new FormData;
var arrFile = [];
var _url = 'uploadhtml5.php';
for(var i = 0, length = fileList.length; i < length; i++ ){
fd.append("xfile", fileList[i]);
$.ajax({
type: 'POST',
url: _url,
data: fd,
contentType: false,
dataType: "json",
processData: false
})
.then(function(msg){
// alert(msg.filename);
$(".show").append(msg.img);
},function(e){
});
}
}, false);
} else $("#dtb-msg1 .compatible").hide(),
$("#dtb-msg1 .notcompatible").show();
});
</script>
</head>
<body>
<div id="target_box" class="dashboard_target_box">
<div id="drop_zone_home" class="dashboard_target_messages_container">
<p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">选择你的图片<br>
开始上传</p>
<p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px"> <span class="compatible" style="display:inline">拖动图片到</span><span class="notcompatible" style="display:none">点</span>这里<br>
开始上传图片 </p>
</div>
<p id="dtb-msg3" class="dashboard_target_box_message">选择网络图片</p>
<p id="dtb-msg4" class="dashboard_target_box_message" style="position:relative"> <span style="display:none;width:200px;height:2px;background:#ccc;left:-25px;position:absolute;z-index:1"></span> <span style="display:none;width:0px;height:2px;background:#09F;left:-25px;position:absolute;z-index:2"></span> </p>
</div>
<div class="show">显示图片</div>
</body>
</html>