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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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
咖啡与牛奶
2021/03/03 冲泡冲煮
Zend Guard一些常见问题解答
2008/09/11 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python_LDA实现方法详解
2017/10/25 Python
python代码实现ID3决策树算法
2017/12/20 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
详解Python中的文件操作
2021/01/14 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
中科方德软件测试面试题
2016/04/21 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
个人评语大全
2014/05/04 职场文书
2014教师研修学习体会
2014/07/08 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers