代码如下:

$().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();
}
});

代码如下:

$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);
}
}