这阵子做了一个项目,涉及到了图片上传,以往用的都是uploadify这个插件,感觉它在PC上的使用还是很强大的,
不过最近这个项目涉及到了移动端的上传,其实uploadify也可以,但是他有一个 uploadify.swf,这个东东在移动端可是不被待见的,需要调整才可以.
我是懒得去调整uploadify,而且也不能保证调整之后会比原装的更好,因此,采用了另一个插件: jquery.fileupload,
本来也是想去网上搜罗一下这个插件的具体用法,然后我就可以坐享其成了,
可现实结果告诉我你不要做梦了,赶紧自己研究吧.
对于一个需要解决实际问题的码农来说,他最想要的是什么?当然是可完成的逻辑了.
可网上都在讲这个插件的基本理论,试问,那边有官网我用你讲什么理论呢?对不对.
先来看一下官网截图吧:
我是喜欢它结合bootstrap的美观性,所以用了它.
言归正传,首先做上传图片这个功能之前一定要明确这样几个步骤:
1.前端上传页面和控件.
2.后端可以接收处理的逻辑代码文件(一般文件只能以POST进行接收,虽然是废话,但还是要强调.真的有遇到过用GET提交的.).
3.你还想干嘛?那就谁也不知道了.
先来创建一个HTML页面,取名为 addimage.html
需要引入的资源文件如下(存放位置不是唯一的,这是我的项目资源文件的存放结构)
<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" /> <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/upload/jquery.fileupload.css" /> <script type="text/javascript" src="/js/upload/jquery.ui.widget.js"></script> <script type="text/javascript" src="/js/upload/jquery.iframe-transport.js"></script> <script type="text/javascript" src="/js/upload/jquery.fileupload.js"></script>
然后在页面中,添加一个input file类型的标签代码:
<span class="btn btn-primary fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>请选择上传文件</span> <input id="fileupload" type="file" name="files[]" multiple> </span>
最后再添加一组,JS代码段,即可:
<script type="text/javascript"> $("#fileupload").fileupload({ url: "/street/api/upload_street_image", //后台代码URL地址 dataType: "json", //返回数据的类型 sequentialUploads: false, autoUpload: true, //是否允许自动上传文件. formData: { adbumnid: "{$streetid}" }, //参数 //选择添加文件后,添加文件前,所执行的方法. add: function (e, data) { data.submit();//提交 }, //上传后返回的参数处理逻辑. done: function (e, data) { var json = eval("(" + data.result + ")"); //console.log(json); layer.msg(json.msg); if (json.code == 0) { //回调父级加载数据方法. window.parent.vStreetAlbum.getPhotoList(1, 12); } } }); </script>
这样一来前台的页面的添加就结束了.
再来添加后台的接受文件处理逻辑.
我的项目是PHP开发的,因此接下来这里的代码只采用PHP代码为实例.
(PHP版本为7,这个很重要,因为PHP5的一些东西在7里面已经被不建议了)
项目是TP5框架,所以需要在api接口中增加一个function,
/** * 获取设置上传文件. * @author xingzhi 2018年9月4日 * @param int 图片所属专辑主键id */ public function upload_street_image($adbumnid)
接下来在这个方法内写自己需要实现的逻辑,首先需要判断这个文件是否存在吧?
//验证上传的文件是否存在. if(!$_FILES['files']['error']){ $this->result['msg'] = '上传文件错误.'; $this->result['code'] = -1; } else { }
如果存在,那么就需要把它相关的参数取出来
//图片原始文件名称. $file_original_name = $_FILES['files']['name'][0]; //临时图片路径 $temp_img = $_FILES['files']['tmp_name'][0]; //文件类型. $file_type = $_FILES['files']['type'][0]; //文件扩展名称. $file_existion = pathinfo($file_original_name, PATHINFO_EXTENSION); //文件大小 $file_size = $_FILES['files']['size'][0];
接下来需要获取图片的EXIF元信息.
工作时有同僚曾问过我什么是EXIF? what? 那就顺便简单科普一下,
个人的理解, EXIF其实就是是图片中可交换的数据信息和拍摄数据.例如,图片宽高,图片大小,拍摄日期,相机型号,曝光,IOS速度等这些拍摄数据.
它由日本电子发展工业协会在1996最初定制,还真的不要小看了日本的科技.当然EXIF还有很多很多参数,感兴趣的可以自行研究.
下面是php来获取EXIF数据信息的逻辑,如果你的程序无法识别 exif_read_data 这个方法,那请先去研究一下PHP.INI的配置吧.
//EXIF 元信息. 默认为false. $exif = false; //如果是 jpg的 则读取.否则不读取. if($file_type == "image/jpeg"){ //获取图片的exif信息. $exif = exif_read_data($temp_img,"IFD0"); }
然后是获取必要的参数
//获取时间. if(empty($exif["DateTimeOriginal"])){ $DateTimeOriginal = date('Y-m-d H:i:s.u', time()); } else { //DateTimeOriginal 的时间日期部分的参数是 2018:08:08 08:08:08 这个样子,所以需要处理一下才能入库 $DateTimeOriginal = str_replace(':', '-', substr($exif["DateTimeOriginal"], 0, 10)).substr($exif["DateTimeOriginal"], 10); } $Make = $exif["Make"]; //制造厂商. $Model = $exif["Model"]; //相机型号 $ExposureTime = $exif['ExposureTime']; //曝光時間 $ExifVersion = $exif['ExifVersion']; //EXIF 版本. $ISOSpeedRatings = $exif['ISOSpeedRatings']; //ISO 速度.
接下来就是保证你要存储的文件物理路径是要存在的才行,因此要判断\要判断\要判断.重要的事情说三次.
//图片存储物理根路径. $save_root_path = Config::get("PHOTOS_SAVE_ROOT"); //耳二级目录 $save_sub_dir = Config::get("SECOND_DIR_PATH")['STREET']; //缩略图片存储目录物理根路径. $save_t_dir_path = "/thumbnail"; //原始图片存储目录物理根路径. $save_o_dir_path = "/".date('Ym', strtotime($DateTimeOriginal))."/"; //文件名称. $filename = date('Ymdhis')."_".create_guid().".".$file_existion; //验证略图目录 if(!is_dir($save_root_path.$save_sub_dir.$save_t_dir_path.$save_o_dir_path)){ mkdir($save_root_path.$save_sub_dir.$save_t_dir_path.$save_o_dir_path, 0777, true); } //验证原始目录 if(!is_dir($save_root_path.$save_sub_dir.$save_o_dir_path)){ mkdir($save_root_path.$save_sub_dir.$save_o_dir_path, 0777, true); }
这样一来,原始图片获取到了,参数也整理完了,路径也验证通过了,那就要实现核心部分的落库和裁图了.
数据库落库代码就不列举了,每个业务不同,代码也都一样,没什么好说的.
PHP要处理图片,就避免不了需要 gd库了,怎么办?打开PHP.INI文件,自行学习吧,这里不阔论.
首先一定要调用TP的Image类.先来引入它,
use think\Image;
然后调用它
//实例化图片操作类 $image = Image::open($temp_img); $image->open($temp_img);
最后移动和裁切它就可以了
//移动保存原始图 if(move_uploaded_file($temp_img, $save_root_path.$save_sub_dir.$save_o_dir_path.$filename)){ //保存缩略图 $image->thumb( Config::get("STREET_THUB_WIDTH"), Config::get("STREET_THUB_HEIGHT"), Image::THUMB_CENTER)-> save($save_root_path.$save_sub_dir.$save_t_dir_path.$save_o_dir_path.$filename); $dba = new Streetphoto(); $dba->set_street_imagecount($adbumnid); $this->result['msg'] = "上传成功."; $this->result['data'] = array( 'dbval' => $value, 't' => Config::get("IMAGE_DOMAIN_URL").$save_sub_dir.$save_t_dir_path.$save_o_dir_path.$filename, 'o' => Config::get("IMAGE_DOMAIN_URL").$save_sub_dir.$save_o_dir_path.$filename, ); } else { $this->result['msg'] = "上传失败."; $this->result['code'] = -1; }
最后返回结果,因为前端需要的是json数据,那就返回json数据
return json_encode($this->result);
到此上传图片数据的过程就完事儿了.