关于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上传图片的开发用法流程的更多相关文章
- 另一种图片上传 jquery.fileupload.js
今天遇到另外一种上传图片方法 用jquery.fileupload.js <input type="file" name="file[]" multipl ...
- jQuery FileUpload等插件的使用实例
1.jQuery FileUpload 需要的js: jquery.js jquery.fileupload.js jquery.iframe-transport.js jquery.xdr-tran ...
- jquery.fileupload插件的简易使用日志
来源:http://yixiandave.iteye.com/blog/1897330 本文内容主要包含fileupload插件传递参数和取回服务器返回数据的方法 jquery.fileupload官 ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...
- jquery ajax实例教程和一些高级用法
jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...
- [转] electron实战开发详细流程
[From] http://www.myk3.com/arc-8856.html 很久没有更新博客,人越来越懒了,唉 说好做的electron教程距离上次玩electron已经过去了好几个月了.. 这 ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
随机推荐
- [Django] Creating an app, models and database
To add a new app, first cd to the project. Then run: python manage.py startapp scrumboard After that ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- github视频录制播放相关功能-参考
lookingstars/JZVideoDemo 视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo iOS vi ...
- Operating system coordinated thermal management
A processor's performance state may be adjusted based on processor temperature. On transitions to a ...
- [GeekBand] STL vector 查找拷贝操作效率分析
本文参考文献::GeekBand课堂内容,授课老师:张文杰 :C++ Primer 11 中文版(第五版) :网络资料: 叶卡同学的部落格 http://www.leavesite.com/ htt ...
- scala 通过apply创建类的对象
package cn.scala_base.oop.scalaobject; class Boy(name: String) { private var age: Int = 0; println(n ...
- Adaptive partitioning scheduler for multiprocessing system
A symmetric multiprocessing system includes multiple processing units and corresponding instances of ...
- java基础——try catch final
1.不管有木有出现异常,finally块中代码都会执行: 2.当try和catch中有return时,finally仍然会执行: 3.finally是在return后面的表达式运算后执行的(此时并没有 ...
- 一个完整配置例nginx.conf(生产环境中使用)
一个完整的nginx配置案例,生产环境 一个完整配置例(生产环境中使用) user nobody nobody; worker_processes 4; worker_rlimit_nofile 51 ...
- windows下安装ffmpeg
一.下载地址: 网址:https://ffmpeg.org/ 选择Windows版本:https://ffmpeg.org/download.html#build-windows 二.解压安装: 下载 ...