拖拽上传最重要的就是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);
????}
} |
PHP最终会返回一个JSON格式的数组，我返回的信息就是图片地址、名称，还有段img的html代码，最后在js那边获取到json数组并处理，至此，操作结束。
文章最开始提到，还有点击选择文件上传和网络图片，因为这2个不属于这次的主题范围内，就不说了。况且这2个功能实现起来都不麻烦。
1 楼
greatghoul
2012-02-02
而已再好点就完美了。