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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
html中两种获取标签内的值的方法
Jun 16 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
YB217、YB235、YB400浅听
2021/03/02 无线电
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
javascript实用方法总结
2015/02/06 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python实现随机漫步算法
2018/08/27 Python
python微信好友数据分析详解
2018/11/19 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python中的With语句的使用及原理
2020/07/29 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
统计员岗位职责
2013/11/14 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
室内设计专业自荐信
2014/05/31 职场文书