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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
多重?l件?合查?(一)
2006/10/09 PHP
php a simple smtp class
2007/11/26 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
简单叙述一下MYSQL的优化
2016/05/09 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
校长就职演讲稿
2014/01/06 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技