当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery+ThinkPHP图片上传相关代码

jQuery+ThinkPHP图片上传相关代码

2020年07月22日  | 移动技术网IT编程  | 我要评论

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

本文地址：https://blog.csdn.net/qq_37428140/article/details/107484981

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网