关于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 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);

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

巴特西

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

最新文章

热门文章