tp5图片文件ajax上传总结

爱被打了一巴掌 2022-11-09 12:58 171阅读 0赞

## tp5图片文件上传 ##

选择图片，显示图片，进行存储；  
**html部分**

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<script src="/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <title>上传图片</title>
    </head>
        <body>
    	<h2>tp5图片上传</h2>
    		<form id="form">
    			<input type="file" id="image" name="image" onchange="picture(this);" />
    			<img class="img">
    		</form>
        </body>
    	<script type="text/javascript">
    		 function picture() {
         
    			var datas = new FormData($('#form')[0]);
    				console.log(datas);
    				$.ajax({
         
    					url:"/index/index/img",
    					type:'POST',
    					data:datas,
    					dataType:'json',
    					cache:false,
    					processData:false,
    					contentType:false,
    					success: function(data) {
         
    						console.log(data);
    						$('.img').attr("src",""+data+"");
    					},
    				});
    	}
        </script>
    </html>

public function img()
    	{
        	
    		$file = request()->file('image');//获取图片
    		$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');//图片存储
    		if($info){
        
               $a= $info->getSaveName(); 
    		   $b='/uploads/'.$a;
    		   return $b;
    		}
    	}

一个简单的上传图片的小功能，但是我是没有写数据存储。  
请各位大佬多多指教！！！！

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 tp5图片文件ajax上传总结

tp5图片文件上传选择图片，显示图片，进行存储； html部分 <!doctype html> <html lang="en"> <hea

爱被打了一巴掌/ 2022年11月09日 12:58/ 0 赞/ 172 阅读

相关 tp5 oss上传

\\ tp5 oss上传 \\ 1进入项目后，安装扩展 composer require aliyuncs/oss-sdk-php 2.上传文件

今天药忘吃喽~/ 2022年10月16日 00:57/ 0 赞/ 137 阅读

相关 ajax上传img files,ajax,MultipartFile图片上传

1.html 结构 uploadimg 2.js $("\uploadimg").on("click", function () \{ var file = $('\f

你的名字/ 2022年09月03日 11:16/ 0 赞/ 208 阅读

相关 ajax上传图片

index.html <!DOCTYPE html> <html> <head> <title>Ajax 上传文件</title>

向右看齐/ 2022年06月05日 08:17/ 0 赞/ 178 阅读

相关 ckeditor5 图片上传,tp5整合ckeditor5编辑器使用

\\ 更新：2019年1月29,"ckeditor5 图片上传,tp5整合ckeditor5编辑器使用"之前放的ckeditor.js文件过期,现已更新可用,同时提供可下载

深碍√TFBOYSˉ_/ 2022年05月22日 08:19/ 0 赞/ 236 阅读

相关 AJAX异步上传图片(TP5)

php代码： /\\ \ 上传 \/ public function upload\_photo()\{ $

心已赠人/ 2022年05月08日 08:44/ 0 赞/ 257 阅读

相关 TP5实现多文件上传

最近要实现多图片上传,折腾了很久,总结一下基本的步骤。首先前端代码: <form id="addform" action="Upload\_talent\_tablec

￡神魔★判官ぃ/ 2022年04月25日 08:02/ 0 赞/ 383 阅读

相关 tp5上传图片并生成缩略图

<?php namespace app\\common\\controller; use app\\common\\model\\Goods; class Tool

╰+攻爆jí腚メ/ 2022年04月08日 09:15/ 0 赞/ 337 阅读

相关 tp5——上传图片到七牛云

使用tp5上传土片到七牛云亲测可用第一步首先下载[sdk包][sdk] 下载后找到Qiniu文件夹将该文件夹放到extend文件下。 ![在这里插入图片描

ゝ一世哀愁。/ 2022年03月19日 10:20/ 0 赞/ 265 阅读

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

图片上传 html页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

怼烎@/ 2022年02月17日 09:16/ 0 赞/ 350 阅读