html5+php实现文件拖动上传功能

HTML5

1个成员

html5+php实现文件拖动上传功能

发表于 2017-02-05 • 4599 次查看

本文章介绍了关于在html5中实现文件上传的功能介绍，有需要的同学可以参考一下下哈。

　　界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图：

　　拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云。所以先来看下js实现代码吧。

代码如下

复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.7.1.min.js"></script>
<style>
.dashboard_target_box{width:250px;height:105px;border:3px dashed #E5E5E5;text-align:center;position:absolute;z-index:2000;top:0;left:0;cursor:pointer}
.dashboard_target_box.over{border:3px dashed #000;background:#ffa}
.dashboard_target_messages_container{display:inline-block;margin:12px 0 0;position:relative;text-align:center;height:44px;overflow:hidden;z-index:2000}
.dashboard_target_box_message{position:relative;margin:4px auto;font:15px/18px helvetica,arial,sans-serif;font-size:15px;color:#999;font-weight:normal;width:150px;line-height:20px}
.dashboard_target_box.over #dtb-msg1{color:#000;font-weight:bold}
.dashboard_target_box.over #dtb-msg3{color:#ffa;border-color:#ffa}
#dtb-msg2{color:orange}
#dtb-msg3{display:block;border-top:1px #EEE dotted;padding:8px 24px}
</style>
<script>
$().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();
}
});
</script>
</head>

<body>
<div id="target_box" class="dashboard_target_box">
<div id="drop_zone_home" class="dashboard_target_messages_container">
  <p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">选择你的图片<br>开始上传</p>
  <p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px">
   <span class="compatible" style="display:inline">拖动图片到</span><span class="notcompatible" style="display:none">点</span>这里<br>开始上传图片
  </p>
</div>
<p id="dtb-msg3" class="dashboard_target_box_message">选择网络图片</p>
<p id="dtb-msg4" class="dashboard_target_box_message" style="position:relative">
  <span style="display:none;width:200px;height:2px;background:#ccc;left:-25px;position:absolute;z-index:1"></span>
  <span style="display:none;width:0px;height:2px;background:#09F;left:-25px;position:absolute;z-index:2"></span>
</p>
</div>
<div class="show" style="float:left;width:300px;height:150px;border:1px solid red;margin-top:200px;overflow:hidden;"></div>
</body>
</html>

test.php文件

代码如下

复制代码

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