html5 拖拽上传图片实例演示

因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效，如果失效请在文章最后点击demo下载）：
 
界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持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);
}
}

php最终会返回一个json格式的数组，我返回的信息就是图片地址、名称，还有段img的html代码，最后在js那边获取到json数组并处理，至此，操作结束。
文章最开始提到，还有点击选择文件上传和网络图片，因为这2个不属于这次的主题范围内，就不说了。况且这2个功能实现起来都不麻烦。