欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

php上传多个文件blueimp/jQuery-File-Upload大改造

程序员文章站 2022-04-30 12:52:04
...
如何上传多个文件
https://github.com/blueimp/jQuery-File-Upload/releases
上面这个类库
blueimp/jquery-file-upload

可以上传多个文件,主要靠jquery工作。

下载地址:
https://github.com/blueimp/jQuery-File-Upload/releases
当前版本9.18.0,下载zip即可。

该js类库主要内容:
一个牛掰的服务端php文件。
一整套客户端js和css上传框架。


把项目下载下来,文件夹重命名(例如jquery_upload),放在web目录下。

1、删除
删除angularjs.html, basic-plus.html, basic.html, jquery-ui.html
删除server / gae-go, 删除 server / gae-python

2、修改google相关js。
必须改,否则被墙。
index.html : line 219

//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
改成
https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
=====

cors/postmessage.html : line 18

//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
改成
https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js

3,去除index.html页面多余的内容
其实现在已经可以使用了!


去除 line 27
<link rel="stylesheet" href="css/style.css">

去除line 38 -57 ,body下的第一个大div

去除41 - 54 ,从h2 到 blockquote结束。

去除line 85 -99,Demo Notes

现在看上去好多了。

4) 中文文件名问题。因为原代码会因为汉字文件名上传错误。
假设不保留原文件名,这样比较简单一些。
修改 server / php / UploadHandler.php
修改 trim_file_name函数
函数结尾前加一行
$name = uniqid();
使得新文件名 总是等于随机数。


5、每次刷新index.html,总是把上传目录下所有已上传文件都显示出来,这样不好不安全,应该是刷新后,不要主动读取服务端的目录。
修改 js / main.js
注释line 60 - 72


6、修改文件上传路径
必须修改,否则总是与代码混一起。
假设web目录下有upload文件夹。
我的web目录是D:\workspace\play\public\

希望每天上传的图片是在此下面。且按天生成文件夹。
例如
D:\workspace\play\public/upload/files/20170617/1497676512-819.jpeg

修改server / php / UploadHandler.php
line 47,48改为
'upload_dir' => "D:/workspace/play/public/upload/files/". date("Ymd") ."/",
'upload_url' => "/upload/files/". date("Ymd")."/" ,

代码中,文件夹是自动生成的,只要配置好就行。无需操心。

7、限制只有图片能上传,以及大小。
修改server / php / UploadHandler.php
line 93,96
改为
'accept_file_types' => '/\.(gif|jpe?g|png)$/i',
// The php.ini settings upload_max_filesize and post_max_size
// take precedence over the following max_file_size setting:
'max_file_size' => 5* 1000 * 1000, // 5M 大小限制

服务端上传限制请参考
单个文件上传

8,加入数据库
没添加一个图片,就插入数据库
首先,我本机建表
CREATE TABLE pics (
  id int(10) unsigned NOT NULL AUTO_INCREMENT,
  pic_dir varchar(255) not null default '' comment '类似D:/play/public/upload/files/1497676512-819.jpeg',
  pic_name varchar(255) not null default '' comment '类似1497676512-819.jpeg',
  thumb_dir varchar(255) not null default '' comment '缩略图D:/play/public/upload/files/thumbnail/1497676512-819.jpeg',
  created_at int not NULL DEFAULT 0 comment '创建时间',
  news_id int not NULL DEFAULT 0 comment '文章id',
  size int not null default 0 comment '文件大小,单位字节',
  PRIMARY KEY (id),
  index pic_name(pic_name),
  index pic_dir(pic_dir)
) ENGINE=MYISAM 

修改server / php / UploadHandler.php
第1行加入:
require_once  ("../../../../vendor/autoload.php");

构造方法下加入
$config = new \Doctrine\DBAL\Configuration();
$connectionParams = array(
    			'dbname' => 'test1',
    			'user' => 'root',
    			'password' => 'root',
    			'host' => 'localhost',
    			'driver' => 'pdo_mysql',
    	);
$conn = \Doctrine\DBAL\DriverManager::getConnection(
	$connectionParams, $config);
$this->db = $conn;


handle_file_upload方法中修改
} else {
                // Non-multipart uploads (PUT method support)
                file_put_contents(
                    $file_path,
                    fopen($this->options['input_stream'], 'r'),
                    $append_file ? FILE_APPEND : 0
                );
            }
            
            $this->db->insert('pics', array(
            		'pic_dir' => $file_path,
            		'pic_name' => $file->name,
            		'created_at'=> time(),
                        'size'=> $file->size,
            		'thumb_dir'=>preg_replace('#^(.+?)/[^/]*$#', '$1', $file_path)
            		."/thumbnail/".$file->name,
            ));
            $file->id = $this->db->lastInsertId();
            
            $file_size = $this->get_file_size($file_path, $append_file);
            if ($file_size === $file->size) {
                $file->url = $this->get_download_url($file->name);
                if ($this->is_valid_image_file($file_path)) {
                    $this->handle_image_file($file_path, $file);
                }
            } else {


让客户端显示图片id
修改index.html
line 142
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%} 图片id:{%=file.id%}</a>


让删除也完成,修改delete方法,只加一句话。
 $success = is_file($file_path) && $file_name[0] !== '.' && unlink($file_path);
            if ($success) {
            	
            	// 数据库删除
            	$this->db->delete('pics', array('pic_dir' => $file_path));
            	
                foreach ($this->options['image_versions'] as $version => $options) {
                    if (!empty($version)) {
                        $file = $this->get_upload_path($file_name, $version);
                        if (is_file($file)) {
                        	
                            unlink($file);
                        }
                    }
                }
            }
            $response[$file_name] = $success;


9) 生成多个缩略图
修改构造方法中的设置,这样,会生成另一个文件夹,注意,键名即文件夹名称。
	'thumbnail2' => array(
            	    'max_width' => 180,
            		'max_height' => 180
            	),
                'thumbnail' => array(
                    'max_width' => 80,
                    'max_height' => 80
                )