jQuery+ThinkPHP图片上传相关代码

最新推荐文章于 2024-04-16 16:53:01 发布

西红柿炒番茄31

最新推荐文章于 2024-04-16 16:53:01 发布

阅读量323

点赞数 2

分类专栏： JavaScript ThinkPHP 文章标签：图片上传 jquery thinkphp

本文链接：https://blog.csdn.net/qq_37428140/article/details/107484981

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ThinkPHP

3 篇文章 0 订阅

订阅专栏

一，利用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'];

西红柿炒番茄31

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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&g
复制链接

扫一扫