首页 > 研发产品 > 拖动多张图片上传功能html5

拖动多张图片上传功能html5

2013-06-08 00:00:00 by 【6yang】, 8867 visits, 收藏 | 返回
非常不错的拖动多图片上传功能
只在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>

    图片原图

    loading

    loading