如何上传多个文件
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 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") ."http://m.codes51.com/", 'upload_url' => "/upload/files/". date("Ymd")."http://m.codes51.com/" ,
代码中，文件夹是自动生成的，只要配置好就行。无需操心。
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 )