ajax实现base64 图片上传示例 可压缩图片大小

最新推荐文章于 2024-06-10 23:57:19 发布
最新推荐文章于 2024-06-10 23:57:19 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： PHP jquery php实现Base64图片上传 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JXL9910/article/details/84548644
版权
PHP 同时被 3 个专栏收录
40 篇文章 1 订阅
订阅专栏
JavaScript
35 篇文章 0 订阅
订阅专栏
jquery
3 篇文章 0 订阅
订阅专栏

index.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>测试</title>
		<!-- <link rel="stylesheet" href="./css/index.css" /> -->
		<!-- <link rel="stylesheet" href="./css/index_1.css" /> -->
		<script type="text/javascript" src="script/ys.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	</head>
	<body>
		<div class="free-upload">
			<p>
				上传您的照片，上传图片
			</p>
			<div class="free-upload-photo">
				<span id="photo_img"></span>
				<input type="file" id="photo" onchange="start_upload(this)"/>
			</div>
		</div>
		<img src="" id="csimg" width="200" height="200"/>
	</body>
	<script>
		function start_upload(obj){
			 if(!isCanvasSupported){
			 	console.log("2222");
			 }else{
			 	compress(event, function(base64Img){
					$("#csimg").attr("src",base64Img);
					console.log(base64Img);

					// 把base64转成图片  ajax提交后台处理
					$.ajax({
						type: "post",
						dataType: "json",
						scriptCharset: "utf-8",
						url: "touxiang.php",
						data: {img : base64Img},
						success: function(data){
							if (data.res == 1) {
								// 成功提示！
								alert(data.msg);
							}else{
								// 失败提示！
								alert(data.msg);
							}

						},
						error:function(argument) {
							alert(" 错误信息：" + XMLResponse.responseText);						}
					})

				});

			 }

		}
		
	</script>
</html>

touxiang.php 示例；

<?php
/**
 * base64图片上传
 * @param $base64_img
 * @return array
 */
$base64_img = trim($_POST['img']);

//存放在当前目录的upload文件夹下
$up_dir = './upload/'; 

if(!file_exists($up_dir)){

    mkdir($up_dir,0777);
    
}

if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){

    $type = $result[2]; // 图片类型

    if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){

        // 新的地址 加 文件名
        $new_file = $up_dir.date('YmdHis_').'.'.$type;

        // 解码base64 写入文件 
        if(file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)))){

            $img_path = str_replace('../../..', '', $new_file);

            /* 存储新照片 删除老照片 */
            // 没有数据库操作 此处省略

            // 上传成功
            die(json_encode(array('res'=>1,'msg'=>'上传成功！') ) );
            // echo '图片上传成功</br>![](' .$img_path. ')';

        }else{

            // 上传失败
            die(json_encode(array('res'=>0,'msg'=>'上传失败！') ) );

        }

    }else{

        //文件类型错误
        die(json_encode(array('res'=>0,'msg'=>'图片上传类型错误！') ) );

    }
    
}else{
    //文件错误
    die(json_encode(array('res'=>0,'msg'=>'文件错误！') ) );

}

ys.js 压缩核心文件


//判断是否存在画布
function isCanvasSupported() {
	var elem = document.createElement('canvas');
	return !!(elem.getContext && elem.getContext('2d'));
}
 
//压缩方法
function compress(event, callback) {
	if ( typeof (FileReader) === 'undefined') {
		console.log("当前浏览器内核不支持base64图标压缩");
		//调用上传方式  不压缩
	} else {
		try {
			var file = event.currentTarget.files[0];
			if(!/image\/\w+/.test(file.type)){   
				alert("请确保文件为图像类型");  
				return false;  
			}
			var reader = new FileReader();
			reader.onload = function (e) {
				var image = $('<img/>');
				image.load(function () {
				console.log("开始压缩");
				var square = 700; // 定义变量
				var canvas = document.createElement('canvas');
				canvas.width = square; // 新图片的width
				canvas.height = square;// 新图片的height	
				var context = canvas.getContext('2d'); // 画布绘图环境
			    context.clearRect(0, 0, square, square); 
				var imageWidth;
				var imageHeight;
				var offsetX = 0;
				var offsetY = 0;
				if (this.width > this.height) {
					imageWidth = Math.round(square * this.width / this.height);
					imageHeight = square;
					offsetX = - Math.round((imageWidth - square) / 2);
				} else {
					imageHeight = Math.round(square * this.height / this.width);
					imageWidth = square;
					offsetY = - Math.round((imageHeight - square) / 2);
				}
				context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
				var data = canvas.toDataURL('image/jpeg');
				 	//压缩完成执行回调
			     	callback(data);
				});
				image.attr('src', e.target.result);
			};
			reader.readAsDataURL(file);
		} catch(e) {
			console.log("压缩失败!");
			//调用上传方式  不压缩
		}
	}
}
JXL666888
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现文件编码成base64并通过AJAX上传的方法
12-12
本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考，具体如下： 使用AJAX是无法直接上传文件的，一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性，不过代码量会比较大，即使是使用了文件上传插件，例如plupload。 如何能达到灵活的程度呢，能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了。 灵光一闪，利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手，丰衣足食。 前端对文件进行base64编码并通过aj
AJAX上传Base64编码图片
weixin_37595711的博客
12-20 7139
SSM图片上传：https://blog.csdn.net/weixin_37595711/article/details/85109381  1.html部分 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;上传图片&lt;/title&gt; &lt;/head&gt; &l
后端|压缩Base64图片的两种方式
最新发布
奈川直子
06-10 861
Base64是一种将二进制数据编码为ASCII字符串的方法。它通过将3个字节的二进制数据转换为4个可打印字符的ASCII字符，从而将二进制数据转换为可传输的文本格式。Base64编码常用于传输图片或音频文件。Base64编码可以保证数据在传输过程中不丢失，同时可以避免某些系统不支持二进制数据的问题。但是Base64转换成图片之前，如何压缩目标图片的大小呢？方法一：按尺寸压缩（不保证图片质量）
ajax上传图片php,「PHP+前端」Ajax异步base64位图片上传教程
weixin_30873127的博客
03-09 469
各位客官好，当我们在前后端分离开发时，时常会遇到上传一些图片的功能，这个时候我们不能通过form表单来提交做上传，但是可以通过将图片转换为base64位编码，将编码传输给后台，再由后台将base64位编码重新生成图片，将图片保存，那么下面由小编为没有使用过的phper以及前端们来编写这段demo。小编的代码都是纯手打，而且都经过多次测试确定代码能用之后才给各位客官看的，看在小编的辛苦，希望各位客官...
通过将图片文件转换成Base64编码实现ajax提交图片
热门推荐
yangyuscript的博客
06-05 2万+
背景：最近在开发的一个H5app中更改用户头像的需求，需要通过ajax来上传头像图片，于是使用图片转换成base64编码的方式来上传图片。当然我们需要在后台将上传的base64编码在转换成图片，保存在服务器哈。下面就是实现代码，具体源码会在评论里给出地址。 前端代码： //上传头像图片 function uploadHead(imgPath)
c ajax 上传图片插件,JavaScript AJAX上传base64图片
weixin_36236774的博客
08-05 132
下面代码可以通过Ajax请求，直接向一个正常的文件上传接口提交请求，上传已经base64编码的图片文件。直接贴代码：function ajaxSubmitImageFile(base64Codes) {let convertBase64UrlToBlob = function(urlData) {let arr = urlData.split(',');let mime = arr[0].matc...
HTML5 JS压缩图片并获取图片BASE64编码上传
10-21
本篇文章将详细讲解如何使用HTML5的JavaScript来压缩图片并获取图片的BASE64编码，以便于上传到服务器。 首先，我们要了解几个关键的HTML5 API： 1. **FileReader API**: 这个API允许我们访问本地文件系统，读取...
Vue 图片压缩并上传至服务器功能
11-21
在图片上传过程中，我们通常会将图片先转化为 Base64 格式，然后进行压缩，再转化为 Blob 对象，最后通过 AJAX 或 Fetch API 上传到服务器。 在 Vue 项目中，我们可以使用 Vant UI 提供的图片选择组件 `van-image-...
JS实现异步上传压缩图片
10-19
在本文中，我们将探讨如何使用JavaScript实现异步上传并压缩图片，以及如何即时显示这些图片。这个过程涉及到几个关键的技术点，包括HTML5的File API、Ajax异步请求和图片压缩库的使用。 首先，要实现异步上传图片...
localResizeIMG先压缩后使用ajax无刷新上传（移动端）
09-03
在这个示例中，当用户选择图片后，`localResizeIMG`会自动执行，压缩图片并在`success`回调中返回Base64数据。接着，这些数据会被传递给`uploadImage`函数，通过AJAX发送到服务器。 **移动端补丁**，如`...
上传图片压缩
03-25
5. 压缩完成后，将结果转换为适合上传的格式，如Base64字符串或二进制数据流。 6. 发送压缩后的图片数据到服务器，可能使用Ajax异步请求或multipart/form-data格式。 7. 服务器接收到压缩图片后，可以进一步处理，如...
借助FileReader实现将文件编码为Base64后通过AJAX上传
09-03
主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
10-21
本文通过三步骤给大家详细介绍了JavaScript将base64图片转换成formData并通过AJAX提交的实现方法，感兴趣的朋友一起看看吧
html5上传图片转换成base64值传入后台，再转换为图片保存在服务器
10-30
这个是基于某个同志的资源进行修改的。 同时生成了缩略图和正常图片的base64值，缩略图用于页面进行显示，正常图片进行后续打开查看。测试了安卓和ios的微信端，一切正常。 另外由于缓存资源的原因没有考虑上传按钮的添加，上传图片即上传，ajax为异步请求。 至于后台是C#没啥好看的，就是数据库插入。 后续更新成base64数据保存到数据库，直接base64转换成图片保存在服务器，数据库存储相关信息，下载或者查看的时候直接调用相对路径的文件即可。 毕竟base64的数据保存到数据库太影响查询了。另外在存储文件的时候生成了随机码，毕竟上传的图片名称可能相同会覆盖掉。
js html java servlet 前台接收base64数据后台转图片保存上传
11-17
js html java servlet 前台接收base64数据后台转图片保存上传 全套代码 直接可以用
图片上传（ajax通过base64格式的字符串方式上传图片至服务端）
haoranhaoshi的博客
05-05 3125
（1）getBase64(imgPath);//path为img路径 （2）function getBase64(imgPath) { //图片转base64  function getBase64Image(img, width, height) { //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小   var canvas = document.createE...
js上传图片用ajax传输base64
weixin_34242819的博客
05-18 315
2019独角兽企业重金招聘Python工程师标准>>> ...
ajax传输base64,如何通过ajax发送大的base64图像字符串？
weixin_29158413的博客
08-06 1457
我在通过ajax发送base64图像字符串时遇到问题。当我上传小图片时，它工作正常，但是当我尝试上传大图时，它会产生一个错误。其实我正在创建一个在线可定制的打印Web应用程序。因此，用户可以选择添加文字&图像。我想要的是，当用户按提交buttom时，html页面的body标签内的整个数据应该通过ajax传递到我的sql服务器数据库。如何通过ajax发送大的base64图像字符串？​​这里是...
js实现压缩base64图片压缩并上传
05-25
以下是一个示例代码，使用canvas将图片压缩为指定大小，然后将压缩后的base64字符串上传到服务器。 HTML代码： ```html ``` JavaScript代码： ```javascript // 获取文件输入框元素 const fileInput = document...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值