Ajax（使用 jQuery，php）异步上传图片（二进制流）存储到新浪云平台storage

最新推荐文章于 2022-05-23 17:37:18 发布

友人C君~

最新推荐文章于 2022-05-23 17:37:18 发布

阅读量1k

点赞数

文章标签： php 前端上传图片新浪云

本文链接：https://blog.csdn.net/CWH0908/article/details/84977190

版权

这两天实现了一个发布图片的功能，可谓是一波三折，bug不断啊，趁刚搞定，赶紧把过程写下来，顺便把代码传过来。记录了图片在本地的存储和

将本地的图片以二进制流提交到后台php文件

在html文件中的操作自然就是在表单form元素中添加属性 enctype="multipart/form-data"，将其转成二进制流，然后就是input type="file"元素将其提交到PHP后台。而在PHP文件中则是$file1 = $_FILES['你的图片name值'];来获取你的二进制流数据，filesize($file1['name'])>3*1024y用来控制图片的大小（3MB），move_uploaded_file($file1['tmp_name'], $file1Path);用来转存你的图片到$file1Path此路径，以此实现图片的在本地的转存。

将本地的图片保存在数据库中

由于我主要是保存在云平台，所以在这就列出一些可行的操作链接

保存图片路径到数据库中，并根据路径显示图片https://segmentfault.com/a/1190000015750653

将图片本身保存在数据库中，并取出图片显示https://www.cnblogs.com/Skrillex/p/7541885.html

将本地的图片保存在云平台storage

首先，在新浪云平台中，有个storage存储服务（Storage是分布式文件存储服务，用来存放持久化存储的文件。支持文本、多媒体、二进制等任何类型的数据的存储）（创建了自己应用的基础上再创建该服务）

创建好之后就是使用php来连接到你的storage存储空间

连接成功以后就可以通过表单二进制流数据的形式将图片文件存储到你的storage空间中。请看完整代码

html文件

<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1">	
</head>
<body>
	<form action="测试文件3上传文件.php" method="POST" enctype="multipart/form-data" class="uploadImageForm">
		<input type="file" name="file" id="file" />
		<input type="submit" value="Submit" name="submit"/>	
	</form>
</body>
</html>

php文件：测试文件3上传文件.php

<?php 
// 当用户点击submit提交上传的文件时
	if(isset($_POST["submit"])){
		// 创建SAE storage存储
		$storage= new SaeStorage();// 创建SAE storage存储对象
		$domain = 'mybucket';// 这里的$domain对应得名字就是自己起的名字
		
		$fileType = $_FILES["file"]["type"]; //被上传文件的类型
	 
		if(($fileType=="image/gif") || ($fileType=="image/jpeg")||($fileType=="image/jpg")||($fileType=="image/png")){			
				$filename = $_FILES["file"]["name"];
				$storage->upload( $domain,$filename,$_FILES[file][tmp_name]); 	 
	    		echo "图片上传成功";		  
	   }
	   else{
	    echo "'上传失败！请选择图片格式！";
	   }
	}
?>

至此完成了图片通过表单提交到storage空间的操作。

我更多的希望可以使用Ajax异步的上传图片，这样的用户体验更好

操作：选择需要上传的图片，点击上传按钮后，将上传的图片存储在storage

实现流程：将submit提交按钮换成普通的按钮，给提交按钮绑定点击事件，在点击事件中，使用FormData类获取表单对象，使用Ajax将表单对象数据异步提交到后台。

部分代码：

表单（注意：enctype="multipart/form-data" 二进制流数据，提交按钮改成普通按钮）

<form name="myForm" id="myForm" action="MY空间后台.php" method="post"  enctype="multipart/form-data">
	<input type="file" name="file" id="selectPhoto" class="col-md-2 uploadButton"/>			
	<input type="button" name="submit" value="submit" id="submit"/>
</form>

绑定点击事件

$(document).ready(function(){
	$('#submit').bind('click',submit);
});

Ajax异步刷新操作函数（注意：var formData=new FormData($('#myForm')[0]);Ajax传文件格式，注意格式！ processData: false contentType: false 必填）

    function submit(){
			var formData=new FormData($('#myForm')[0]);//Ajax传文件格式
			$.ajax({
				url:"MY空间后台.php",
				type:"POST",
				data:formData,//提交表单数据
				success:returnData,//回调函数
				processData: false, 
     			contentType: false,
				async:true
			});
		}
		function returnData(Data){
			alert(Data);
		}

实现效果图