0

0

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

巴扎黑

巴扎黑

发布时间:2017-03-19 14:05:42

|

1784人浏览过

|

来源于php中文网

原创

[导读] 本文章介绍了关于在html5中实现文件上传的功能介绍,有需要的同学可以参考一下下哈。  界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个

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

\

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

\

立即学习PHP免费学习笔记(深入)”;

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

站长俱乐部购物系统
站长俱乐部购物系统

功能介绍:1、模块化的程序设计,使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外,这些过程还提供了不同的调用参数,以实现不同的效果;2、阅读等级功能,可以加密产品,进行收费管理;3、可以完全可视化编辑文章内容,所见即所得;4、无组件上传文件,服务器无需安装任何上传组件,无需支持FSO,即可上传文件。可限制文件上传的类

下载
 代码如下 复制代码





无标题文档





 


  

选择你的图片
开始上传


  


   拖动图片到这里
开始上传图片
  


 
 

选择网络图片


 


  
  
 






test.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 = '@@##@@';
 
 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                  $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);
     }
 }
?>

image

相关文章

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

11

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

13

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

93

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

112

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

155

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 8.9万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 8.4万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号