html5 拖拽提交照片案例演试

日期:2021-02-25 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

由于题目写的是案例,因此本次就不做解读了,由于这个案例我也算是七拼八凑整出来的,参照了大约5、6款拖拽提交的软件和demo,随后把在其中好的地区挑出来,最终就变成这么1个案例,1起看来下吧(详细地址不可以确保长期合理,假如无效请在文章内容最终点一下demo免费下载):
 
页面款式我是参照了1个海外的相册网站,修改不大,只是把鸟语变换成汉语,和提交时的款式也开展了修改,之因此选这个的缘故便是,我很非常容易做拓展,它适用3种方法加上照片,1种拖拽提交,1种基本的挑选文档提交,此外的便是加上互联网照片。它凑巧妙的把3种提交方式整合到了1起,并且你能够用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:'⑷4px'},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') === ⑴){
$('.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提交一部分的编码還是有点不1样的,由于人人那个好像有点不便,我就另寻方式了。
  最终便是提交一部分的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最后会回到1个JSON文件格式的数字能量数组,我回到的信息内容便是照片详细地址、名字,也有段img的html编码,最终在js那边获得到json数字能量数组并解决,至此,实际操作完毕。
文章内容最初提到,也有点一下挑选文档提交和互联网照片,由于这2个不属于这次的主题范畴内,就不说了。更何况这2个作用完成起来都不不便。
demo免费下载