因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效，如果失效请在文章最后点击demo下载）：    <a href="/misc/goto?guid=4959517600717899826" target="_blank">http://hoorayos.caifutang.com/dropupload.html</a>    <p align="center"><img style="display:block;margin-left:auto;margin-right:auto;" alt="HTML5 拖拽上传图片实例" src="https://simg.open-open.com/show/19e27c69b8363d70d30e0e70b491c94c.jpg" width="257" height="112" /></p>    <p>        界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做 扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起，而且你可以用 IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图：</p>    <p align="center"><img style="display:block;margin-left:auto;margin-right:auto;" alt="HTML5 拖拽上传图片实例" src="https://simg.open-open.com/show/147b4aa9b155b8c96554f4e72bd758d6.jpg" width="257" height="114" /></p>    <p>        拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云。所以先来看下js实现代码吧。</p>    <pre class="brush:javascript; toolbar: true; auto-links: false;">$().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();     } });</pre>    <p></p>    <p> 开始我是先判断浏览器类型，因为刚才介绍过，不同浏览器看到的是不同界面。主要实现代码是从“功能实现”开始的，这块具体为何这样操作，原理是什么，我就不多说了，大家可以参考下这篇文章：《<a href="/misc/goto?guid=4959517600809824875" target="_blank">人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)</a>》，不过ajax上传部分的代码还是有点不一样的，因为人人那个似乎有点麻烦，我就另寻途径了。</p>    <p> 最后就是上传部分的PHP代码了，这里我只是提供个参考，你可以根据项目的需求来自己编写。</p>    <pre class="brush:javascript; toolbar: true; auto-links: false;">$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);     } }</pre>    <p></p>    <p> PHP最终会返回一个JSON格式的数组，我返回的信息就是图片地址、名称，还有段img的html代码，最后在js那边获取到json数组并处理，至此，操作结束。</p>    <p> 文章最开始提到，还有点击选择文件上传和网络图片，因为这2个不属于这次的主题范围内，就不说了。况且这2个功能实现起来都不麻烦。</p>    <p> <img title="zip.png" src="https://simg.open-open.com/show/42a8c3e06b0df6f814686984be88c6b4.png" /> <a title="dropupload.zip" href="/misc/goto?guid=4959517600904488008">示例下载.zip</a></p>    <p></p>    <p>来自：<a href="/misc/goto?guid=4959517600998413344" target="_blank">http://www.cnblogs.com/hooray/archive/2012/01/30/2331648.html</a></p>