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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery实现上传图片功能
Jun 29 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
深入php多态的实现详解
2013/06/09 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
javascript实现下雨效果
2017/03/27 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python的flask框架难学吗
2020/07/31 Python
Python如何telnet到网络设备
2021/02/18 Python
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
学生处主任岗位职责
2013/12/01 职场文书
我爱我家教学反思
2014/05/01 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
内勤岗位职责
2015/02/10 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
警告通知
2015/04/25 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
golang elasticsearch Client的使用详解
2021/05/05 Golang