关于jquery.fileupload结合PHP上传图片的开发用法流程

这阵子做了一个项目,涉及到了图片上传,以往用的都是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 thinkImage;

然后调用它

//实例化图片操作类
$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);

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