php用ajax传图片思考

最新推荐文章于 2021-08-06 13:03:43 发布

赤兔马百花袍

最新推荐文章于 2021-08-06 13:03:43 发布

阅读量191

点赞数

分类专栏： php js

本文链接：https://blog.csdn.net/xiao_qing_ge/article/details/103045758

版权

php 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

交代背景

小编昨天做了一个js动态添加图片的前端，你想加几个就能加几个图片，但是传到后台就产生一个问题print_r($_FILE);的结果是array（）；问了百度这个问题，他说要使用表单来提交，如果不是用ajax提交的话，我实在想不出如何将多条记录传到后台？后来我做了几个小例子发现我误解了用表单提交的意思，我之前的想法是ajax提交和表单提交属于不同的方式，如果数据传输格式是json的话，在表单中还会报错。一直认为二者取其一便可，但是这一次打破了我的认知，他们俩可以同时使用，只不过dataType:'json’不能有。

提交一个图片的代码

先建好一个img的文件夹
借用网上的例子
//https://jingyan.baidu.com/article/456c463ba93fe74a583144ae.html
ajax.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>站点</title>
	<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
	function upload(){
		var form = new FormData(document.getElementById("upfile"));
		$.ajax({
			url:"ajax.php",
			type:"post",
			data:form,
			processData:false,
			contentType:false,
			success:function(data){
				alert(data);
			}
		});
	}
</script>
<form id="upfile">
	<input name="uploads" type="file">
	<input type="button" value="sublit" onclick="upload()"><!--绑定事件-->
</form>
</body>
</html>

ajax.php

<?php 
$dest_folder = './img/';//上传图片路径
$tmp_name = $_FILES['uploads']['tmp_name'];
$a = explode('.',$_FILES['uploads']['name']);//截取文件名后缀
$name = date("YmdHis").mt_rand(100,999).".".$a[1];//文件的从命名
$uploadfile = $dest_folder.$name;//文件的路径

move_uploaded_file($tmp_name,$uploadfile);//将图片移到指定目录下
header("Content-type:text/html;charset = utf-8");
echo "图片上传成功;".$uploadfile."";
 ?>

例子思考

数据库存图片思路是：先获取文件路径，在存到数据库，那么传多个图片多跑几遍ajax.php代码。

提交两个图片的代码

ajax.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>多图片</title>
	<script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
	function upload(){
		var form = new FormData(document.getElementById("upfile"));
		$.ajax({
			url:"ajax.php",
			type:"post",
			data:form,
			processData:false,
			contentType:false,
			success:function(data){
				alert(data);
			}
		});
	}
</script>
<form id="upfile">
	<input name="uploads1" type="file">
	<input name="uploads2" type="file">
	<input type="button" value="sublit" onclick="upload()"><!--绑定事件-->
</form>
</body>
</html>

ajax.php

<?php 
$dest_folder = './img/';//上传图片路径
$tmp_name = $_FILES['uploads1']['tmp_name'];
$a = explode('.',$_FILES['uploads1']['name']);//截取文件名后缀
$name = date("YmdHis").mt_rand(100,999).".".$a[1];//文件的从命名
$uploadfile = $dest_folder.$name;//文件的路径

move_uploaded_file($tmp_name,$uploadfile);//将图片移到指定目录下
header("Content-type:text/html;charset = utf-8");
echo "图片1上传成功;".$uploadfile."";

//第二个
$dest_folder = './img/';//上传图片路径
$tmp_name = $_FILES['uploads2']['tmp_name'];
$a = explode('.',$_FILES['uploads2']['name']);//截取文件名后缀
$name = date("YmdHis").mt_rand(100,999).".".$a[1];//文件的从命名
$uploadfile = $dest_folder.$name;//文件的路径

move_uploaded_file($tmp_name,$uploadfile);//将图片移到指定目录下
header("Content-type:text/html;charset = utf-8");
echo "图片2上传成功;".$uploadfile."";

 ?>