tp5 文件上传 图片上传 缩略图

图片上传 html页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form  action="{:url('/image')}" method="post" enctype="multipart/form-data">
    <div class="layui-form-item"> 
      <label class="layui-form-label">图片上传</label>
      <input type="file" class="files" name="files" id="files">
	  <input type="submit" value="提交">
    </div> 
</form>
	</body>
</html>

 控制器

public function image(Request $request){
		if($request->isPost()){
			$file = request()->file('files');  
			$info = $file->rule('uniqid')->move('upload');
			 if($info){
				  $image_name=$info->getSaveName();
				  $url['image']="upload/".$image_name;
				  $sql=Db::name('image')->insert($url);
				  if($sql){
					  echo "成功";
				  }else{
					  echo  "失败";
				   }
			 }
		}else{
	    return view('curd/image');
}

 

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现基于AJAX的图片上传,你可以按照以下步骤进行操作: 1. 创建一个包含上传表单的HTML页面,其中包含一个文件输入字段和一个用于提交表单的按钮。例如: ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="imageFile" id="imageFile"> <input type="submit" value="上传图片"> </form> ``` 2. 使用JavaScript编写一个处理表单提交的函数。该函数将使用AJAX将图片文件发送给服务器。例如: ```javascript function uploadImage() { var form = document.getElementById('uploadForm'); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php', true); xhr.onload = function() { if (xhr.status === 200) { // 图片上传成功 console.log(xhr.responseText); } else { // 图片上传失败 console.error('图片上传失败'); } }; xhr.send(formData); } ``` 3. 创建一个服务器端脚本来处理图片上传。在这个例子中,我们使用PHP来处理上传请求。创建一个名为upload.php的文件,并在其中编写以下代码: ```php <?php $targetDir = 'uploads/'; // 指定图片上传目录 if (!empty($_FILES['imageFile'])) { $tempFile = $_FILES['imageFile']['tmp_name']; $targetFile = $targetDir . basename($_FILES['imageFile']['name']); // 将临时文件移动到目标位置 if (move_uploaded_file($tempFile, $targetFile)) { echo '图片上传成功'; } else { echo '图片上传失败'; } } ?> ``` 确保在服务器上创建一个名为uploads的文件夹,用于存储上传的图片。 4. 最后,在JavaScript代码中,将上传表单的提交事件绑定到处理函数上。例如: ```javascript document.getElementById('uploadForm').addEventListener('submit', function(e) { e.preventDefault(); uploadImage(); }); ``` 这样,当用户选择并提交图片文件时,表单将使用AJAX发送请求到服务器,并将图片文件上传到指定的目录中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值