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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Scrapy的简单使用教程
2017/10/24 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
python 绘制国旗的示例
2020/09/27 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
大学军训感言600字
2014/02/25 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
班主任对学生的评语
2014/04/26 职场文书
完美的中文自荐信
2014/05/24 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
七年级作文之环保作文
2019/10/17 职场文书