mui对接php的upload_关于jquery.fileupload结合PHP上传图片的开发用法流程

这阵子做了一个项目,涉及到了图片上传,以往用的都是uploadify这个插件,感觉它在PC上的使用还是很强大的,

不过最近这个项目涉及到了移动端的上传,其实uploadify也可以,但是他有一个 uploadify.swf,这个东东在移动端可是不被待见的,需要调整才可以.

我是懒得去调整uploadify,而且也不能保证调整之后会比原装的更好,因此,采用了另一个插件: jquery.fileupload,

本来也是想去网上搜罗一下这个插件的具体用法,然后我就可以坐享其成了,

可现实结果告诉我你不要做梦了,赶紧自己研究吧.

对于一个需要解决实际问题的码农来说,他最想要的是什么?当然是可完成的逻辑了.

可网上都在讲这个插件的基本理论,试问,那边有官网我用你讲什么理论呢?对不对.

先来看一下官网截图吧:

我是喜欢它结合bootstrap的美观性,所以用了它.

言归正传,首先做上传图片这个功能之前一定要明确这样几个步骤:

1.前端上传页面和控件.

2.后端可以接收处理的逻辑代码文件(一般文件只能以POST进行接收,虽然是废话,但还是要强调.真的有遇到过用GET提交的.).

3.你还想干嘛?那就谁也不知道了.

先来创建一个HTML页面,取名为 addimage.html

需要引入的资源文件如下(存放位置不是唯一的,这是我的项目资源文件的存放结构)

然后在页面中,添加一个input file类型的标签代码:

请选择上传文件

最后再添加一组,JS代码段,即可:

$("#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) {varjson=eval("(" +data.result+ ")");//console.log(json);

layer.msg(json.msg);if(json.code== 0) {//回调父级加载数据方法.

window.parent.vStreetAlbum.getPhotoList(1,12);

}

}

});

这样一来前台的页面的添加就结束了.

再来添加后台的接受文件处理逻辑.

我的项目是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 = newStreetphoto();$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);

到此上传图片数据的过程就完事儿了.