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个功能实现起来都不麻烦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值