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

如何上传多个文件
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
                )

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

猜你喜欢