jQuery+ThinkPHP实现图片上传

 更新时间:2020-07-22 21:09:23   作者:佚名   我要评论(0)

本文实例为大家分享了jQuery+ThinkPHP实现图片上传的具体代码,供大家参考,具体内容如下
一,利用js实现上传图片时,实时预览相关代码




<!DOCTYPE html>
<htm

本文实例为大家分享了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插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
  • 基于jquery实现图片上传本地预览功能
  • PHP+jQuery+Ajax实现多图片上传效果
  • 基于JQuery实现图片上传预览与删除操作
  • jquery实现兼容浏览器的图片上传本地预览功能
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • 使用jquery.form.js实现图片上传的方法
  • jQuery实现图片上传和裁剪插件Croppie
  • jquery 图片上传按比例预览插件集合

相关文章

  • jQuery+ThinkPHP实现图片上传

    jQuery+ThinkPHP实现图片上传

    本文实例为大家分享了jQuery+ThinkPHP实现图片上传的具体代码,供大家参考,具体内容如下 一,利用js实现上传图片时,实时预览相关代码 <!DOCTYPE html> <htm
    2020-07-22
  • Javaweb接收表单数据并处理中文乱码

    Javaweb接收表单数据并处理中文乱码

    前端表单数据 常见的表单项的传值,如: 普通input 单选radio 多选checkbox select下拉选择 textarea文本域 普通 input : name属性值为后台接收
    2020-07-22
  • Linux下的多线程编程实例解析

    Linux下的多线程编程实例解析

    1 引言   线程(thread)技术早在60年代就被提出,但真正应用多线程到操作系统中去,是在80年代中期,solaris是这方面的佼佼者。传统的Unix也支持线程的概念,
    2020-07-22
  • Java数组的声明与创建示例详解

    Java数组的声明与创建示例详解

    今天在刷Java题的时候,写惯了C++发现忘记了Java数组的操作,遂把以前写的文章发出来温习一下。 首先,数组有几种创建方式? Java程序中的数组必须先进行初始化才可
    2020-07-22
  • 详解node.js 事件循环

    详解node.js 事件循环

    Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。 Node.js 几乎每一个 API 都是支持回
    2020-07-22
  • Java爬虫技术框架之Heritrix框架详解

    Java爬虫技术框架之Heritrix框架详解

    Heritrix是一个由Java开发的开源Web爬虫系统,用来获取完整的、精确的站点内容的深度复制, 具有强大的可扩展性,运行开发者任意选择或扩展各个组件,实现特定的抓取
    2020-07-22
  • PHP代码覆盖率统计详解

    PHP代码覆盖率统计详解

    一 安装php环境 二 统计php代码覆盖率 1 需要安装xdebug 安装步骤: //www.jb51.net/article/116419.htm 测试环境 LNMP 军哥一键包1.3版本 PHP 7.0.7 Xdebug
    2020-07-22
  • Java lastIndexOf类使用方法原理解析

    Java lastIndexOf类使用方法原理解析

    lastIndexOf 在字符串中根据搜索条件来返回其在字符串中的位置,空格也计数,如果字符串中没有这样的字符,返回-1。 其方法主要有4个: lastIndexOf(int ch) ,返
    2020-07-22
  • 使用vue实现通过变量动态拼接url

    使用vue实现通过变量动态拼接url

    如何通过变量动态拼接url? 格式:<a :href="'index.shtml&#63;other='+object.name" rel="external nofollow" rel="external nofollow" >这是一个动态链接</a> 需要
    2020-07-22
  • 浅谈mysql通配符进行模糊查询的实现方法

    浅谈mysql通配符进行模糊查询的实现方法

    在mysql数据库中,当我们需要模糊查询的时候 ,我们会使用到通配符。 首先我们来了解一下2个概念,一个是操作符,一个是通配符。 操作符 like就是SQL语句中的操作符
    2020-07-22

最新评论