html 图片拖拽上传图片,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。不兼容').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');}，拖动器：function(e){e.preventDefault();

$('。dashboard_target_box')。addClass('over');}，dragover：function(e){e.preventDefault();$('。dashboard_target_box')。addClass('over');}});varbox=document.getElementById('target_box');box.addEventListener(“drop”，function(e){e.preventDefault();//获取文件列表varfileList=e.dataTransfer.files;varimg=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');返回;}

if($。browser.safari){//Chrome8+img.src=window.webkitURL.createObjectURL(fileList[0]);}否则if($。browser.mozilla){//FF4+img.src=window.URL.createObjectURL(fileList[0]);}else{//实例化文件reader对象varreader=newFileReader();reader.οnlοad=function(e){img.src=this.result;$(document.body).appendChild(img);}reader.readAsDataURL(fileList[0]);}varxhr=newXMLHttpRequest();xhr.open(“post”，“test.php”，true);xhr.setRequestHeader(“X-Requested-With”，“XMLHttpRequest”);xhr.upload.addEventListener(“progress”，function(e){$(“＃dtb-msg3”)。hide();

$(“＃dtb-msg4span”)。show();$(“＃dtb-msg4”)。children('span')。eq(1).css({width：'0px'});$('。show')。html('');if(e.lengthComputable){varload=Math.ceil((e.loaded/e.total)*100);$(“＃dtb-msg4”)。children('span')。eq(1).css({width：(loaded*2)+'px'});;}}，错误)；xhr.addEventListener(“load”，function(e){$('。dashboard_target_box')。removeClass('over');$(“＃dtb-msg3”)。show();$(“＃dtb-msg4span“”hide();varresult=jQuery.parseJSON(e.target.responseText);alert(result.filename);$('。show')。append(result.img);}，false)；varfd=newFormData();fd.append('xfile'，fileList[0]);xhr.send(fd);

}，假);}else{$('＃dtb-msg1.compatible')。hide();$('＃dtb-msg1.notcompatible')。show();}});

开始我是先判断浏览器类型，因为刚才介绍过，不同浏览器看到的是不同的界面。主要实现代码是从“功能实现”开始的，这块具体为何这样操作，原理是什么，我就不多说了，大家可以参考下一篇文章：《人人网首页拖拽上传详解(HTML5Drag＆Drop，FileReaderAPI，formdata)》，不过ajax上传部分的代码还是有点不一样的，因为人人那个看上去有点麻烦，我就另寻途径了。　　最后就是上传部分的PHP代码了，这里我只是提供个参考，你可以根据项目的需求来自己编写。

复制代码

代码如下：

$r=新的stdClass();header('content-type：application/json');$maxsize=10;//Mbif($_FILES['xfile']['size']>($maxsize*1048576)){$r->error=“图片大小不超过$maxsizeMB”;}$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='';回声json_encode($r);

函数imageresize($source，$destination，$width=0，$height=0，$crop=false，$quality=80){$quality=$quality？$quality：80;$image=imagecreatefromstring($source);if($image){//获取尺寸$w=imagesx($image);$h=imagesy($image);if((($width&&$w>$width)||($height&&$h>$height)){$比率=$w/$h;如果(($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;//水平中间$y_mid=$new_height*.5;//垂直中间//重新采样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);//裁剪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))}//输出

//启用[对于渐进式JPEG]交错效果imageinterlace($crop？$crop：$new，true);$dext=strtolower(pathinfo($destination，PATHINFO_EXTENSION));如果($dext==''){$dext=$ext;$destination。='。'。$ext;}开关($DEXT){案'JPEG'：案'JPG'：imagejpeg($作物$作物：$新，$目的地，$质量);打破;案例'png'：$pngQuality=($quality-100)/11.111111;$pngQuality=round(abs($pngQuality));imagepng($crop？$crop：$new，$destination，$pngQuality);打破;case'gif'：imagegif($crop？$crop：$new，$destination);打破;

@imagedestroy($new);@imagedestroy($crop);}}

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