jQuery+ThinkPHP实现图片上传


Posted in jQuery onJuly 23, 2020

本文实例为大家分享了jQuery+ThinkPHP实现图片上传的具体代码,供大家参考,具体内容如下

一,利用js实现上传图片时,实时预览相关代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>预览选择的图片</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
</head> 
<body> 
 <input type="file" onchange="showSelectedImages(this.files)" id="uploadInput"> 
 <br/> 
 <div id="fileList"></div> 
 
</body> 
<script> 
 window.URL = window.URL || window.webkitURL; 
/** 
* 显示选择的文件预览 
* @param {[type]} files 选择的文件 
*/ 
function showSelectedImages(files) { 
 var fileList = document.getElementById('fileList'); 
 if (isImageByType(files[0].type)) {
 var img = '<img src="' + window.URL.createObjectURL(files[0]) + '" style="width:200px;">';
 $('#fileList').html(img);
 }else{
 alert('请选择图片');
 }
} 
 
/** 
* 判断文件是否是图片 
* @param {[type]} fileType 文件 
* @return {Boolean} 
*/ 
function isImageByType(fileType) { 
 return fileType.indexOf("image") < 0 ? false : true; 
} 
</script> 
</html>

二、利用jQuery的Ajax上传图片表单

var formData = new FormData();
formData.append('file', $('#uploadimg')[0].files[0]); //添加图片信息的参数
formData.append("ewmclass",ewmclass);
formData.append("uname",uname);
formData.append("skaccount",skaccount);

$.ajax({
 url: "/User/ewmup",
 type: "post",
 dataType: "json",
 cache: false,
 data: formData,
 processData: false,// 不处理数据
 contentType: false, // 不设置内容类型
 success: function (mes) {
  if(mes.status == 1){
   msg_alert(mes.message,mes.url);
  }else{
   msg_alert(mes.message);
  }
 }
});

三、ThinkPHP上传文件相关代码

//图片上传
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize =  3145728 ;// 设置附件上传大小
$upload->exts  =  array('jpg','jpeg','png','gif');// 设置附件上传类型
$upload->rootPath =  './Uploads/'; // 设置附件上传根目录
$upload->savePath =  'ewm_img/'; // 设置附件上传(子)目录
// 上传文件
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
 echo $upload->getError()
 exit;
}
echo '文件上传目录为:/Uploads/'.$info['file']['savepath'].$info['file']['savename'];

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jquery实现简单拖拽效果
Jul 20 #jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
You might like
PHP中的加密功能
2006/10/09 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python协程之动态添加任务的方法
2019/02/19 Python
详解python运行三种方式
2019/05/13 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
中学生期末评语
2014/02/03 职场文书
十佳护士获奖感言
2014/02/18 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年宣传工作总结
2014/11/18 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技