HTML5 拖拽上传图片实例

　　因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效，如果失效请在文章最后点击demo下载）：http://hoorayos.caifutang.com/dropupload.html

　　界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图：

　　拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云。所以先来看下js实现代码吧。

$().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();
                //$('.dashboard_target_box').removeClass('over');
            },
            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;
            var img = document.createElement('img');
            //检测是否是拖拽文件到页面的操作
            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){
                //Chrome8+
                img.src = window.webkitURL.createObjectURL(fileList[0]);
            }else if($.browser.mozilla){
                //FF4+
                img.src = window.URL.createObjectURL(fileList[0]);
            }else{
                //实例化file reader对象
                var reader = new FileReader();
                reader.onload = function(e){
                    img.src = this.result;
                    $(document.body).appendChild(img);
                }
                reader.readAsDataURL(fileList[0]);
            }
            var xhr = new XMLHttpRequest();
            xhr.open("post", "test.php", true);
            xhr.setRequestHeader("X-Requested-With", "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.addEventListener("load", function(e){
                $('.dashboard_target_box').removeClass('over');
                $("#dtb-msg3").show();
                $("#dtb-msg4 span").hide();
                var result = jQuery.parseJSON(e.target.responseText);
                alert(result.filename);
                $('.show').append(result.img);
            }, false);
             
            var fd = new FormData();
            fd.append('xfile', fileList[0]);
            xhr.send(fd);
        },false);
    }else{
        $('#dtb-msg1 .compatible').hide();
        $('#dtb-msg1 .notcompatible').show();
    }
});

　　开始我是先判断浏览器类型，因为刚才介绍过，不同浏览器看到的是不同界面。主要实现代码是从“功能实现”开始的，这块具体为何这样操作，原理是什么，我就不多说了，大家可以参考下这篇文章：《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)》，不过ajax上传部分的代码还是有点不一样的，因为人人那个似乎有点麻烦，我就另寻途径了。

　　最后就是上传部分的PHP代码了，这里我只是提供个参考，你可以根据项目的需求来自己编写。

$r = new stdClass();
header('content-type: application/json');
$maxsize = 10; //Mb
if($_FILES['xfile']['size'] > ($maxsize * 1048576)){
    $r->error = "图片大小不超过 $maxsize MB";
}
$folder = 'files/';
if(!is_dir($folder)){
    mkdir($folder);
}
$folder .= $_POST['folder'] ? $_POST['folder'] . '/' : '';
if(!is_dir($folder)){
    mkdir($folder);
}
 
if(preg_match('/image/i', $_FILES['xfile']['type'])){
    $filename = $_POST['value'] ? $_POST['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . '.jpg';
}else{
    $tld = split(',', $_FILES['xfile']['name']);
    $tld = $tld[count($tld) - 1];
    $filename = $_POST['value'] ? $_POST['value'] : $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . $tld;
}
 
$types = Array('image/png', 'image/gif', 'image/jpeg');
if(in_array($_FILES['xfile']['type'], $types)){
    $source = file_get_contents($_FILES["xfile"]["tmp_name"]);
    imageresize($source, $filename, $_POST['width'], $_POST['height'], $_POST['crop'], $_POST['quality']);
}else{
    move_uploaded_file($_FILES["xfile"]["tmp_name"], $filename);
}
 
$path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
 
$r->filename = $filename;
$r->path = $path;
$r->img = '<img src="' . $path . $filename . '" alt="image" />';
 
echo json_encode($r);
 
function imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
    $quality = $quality ? $quality : 80;
    $image = imagecreatefromstring($source);
    if ($image) {
        // Get dimensions
        $w = imagesx($image);
        $h = imagesy($image);
        if (($width && $w > $width) || ($height && $h > $height)) {
            $ratio = $w / $h;
            if (($ratio >= 1 || $height == 0) && $width && !$crop) {
                $new_height = $width / $ratio;
                $new_width = $width;
            } elseif ($crop && $ratio <= ($width / $height)) {
                $new_height = $width / $ratio;
                $new_width = $width;
            } else {
                $new_width = $height * $ratio;
                $new_height = $height;
            }
        } else {
            $new_width = $w;
            $new_height = $h;
        }
        $x_mid = $new_width * .5;  //horizontal middle
        $y_mid = $new_height * .5; //vertical middle
        // Resample
        error_log('height: ' . $new_height . ' - width: ' . $new_width);
        $new = imagecreatetruecolor(round($new_width), round($new_height));
        imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
        // Crop
        if ($crop) {
            $crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
            imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
            //($y_mid - ($height * .5))
        }
        // Output
        // Enable interlancing [for progressive JPEG]
        imageinterlace($crop ? $crop : $new, true);
 
        $dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
        if ($dext == '') {
            $dext = $ext;
            $destination .= '.' . $ext;
        }
        switch ($dext) {
            case 'jpeg':
            case 'jpg':
                imagejpeg($crop ? $crop : $new, $destination, $quality);
                break;
            case 'png':
                $pngQuality = ($quality - 100) / 11.111111;
                $pngQuality = round(abs($pngQuality));
                imagepng($crop ? $crop : $new, $destination, $pngQuality);
                break;
            case 'gif':
                imagegif($crop ? $crop : $new, $destination);
                break;
        }
        @imagedestroy($image);
        @imagedestroy($new);
        @imagedestroy($crop);
    }
}