HTML5 拖拽上传图片实例

简介:

  因为标题写的是实例,所以本次就不做讲解了,因为这个实例我也算是东拼西凑整出来的,参考了大概5、6款拖拽上传的插件和demo,然后把其中好的地方挑出来,最后就成了这么一个实例,一起来看下吧(地址不能保证长久有效,如果失效请在文章最后点击demo下载):http://hoorayos.caifutang.com/dropupload.html

  界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持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个功能实现起来都不麻烦。

  demo下载



    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2012/01/30/2331648.html,如需转载请自行联系原作者


相关文章
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
37 1
利用html2canvas插件自定义生成名片信息并保存图片
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
106 0
|
2月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
|
2月前
HTML图片
【10月更文挑战第4天】HTML图片。
28 2
|
3月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
40 5
|
7月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
54 13
|
2月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
33 0
|
4月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
45 0
在线将多张图片拼接起来图工具HTML源码
|
4月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
34 2