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序列化后的表单值转换成Json
Jun 16 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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生成xml时添加CDATA标签的方法
2014/10/17 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python中的heapq模块源码详析
2019/01/08 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
tensorflow 模型权重导出实例
2020/01/24 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
家居装修公司创业计划书范文
2014/03/20 职场文书
美术专业自荐信
2014/07/07 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
教师年终个人总结
2015/02/11 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
六年级作文之关于梦
2019/10/22 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers