利用 Javascript 实现上传图片并向服务器获取图片路径后显示的 demo

本文链接：https://blog.csdn.net/Inite/article/details/78307490

这篇博客介绍了一个利用JavaScript实现的上传图片示例，通过将图片转换为base64 dataURL，然后向服务器请求图片路径。在提交表单时，通过隐藏字段传递图片路径解决安全限制问题。注意需在图片加载完成后处理，确保图片数据完整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于某些特殊原因，有时需要从服务端请求到图片路径，需要给该接口传递对应图片的base64 dataURL，并且有时需要将其上传图片的类型统一为 jpeg 格式时，可采用以下方式。

HTM L代码如下：

<html>
<meta charset="utf-8">
   <form action="表单提交处理的url" method="post">
	   <img id="showImg" src=""/>
	   <br/>
	   <!--下面的隐藏域主要用来改变file类型的input的值，但是file类型的input的值出于安全考虑不让修改，但是表单提交后需要处理该值(放置图片路径)来显示服务器上的图片-->
	   <input type="hidden" id="img" name="uploadImg"/>
	   请选择上传图片：<input type="file" id="uploadImg" onchange="selectImg(this);"/>
   </form>
</html>

JS 代码如下：

<script type="text/javascript">
   var image = '';
   var canvas;
   var base64;//将canvas压缩为base64格式
   function selectImg(file){
	   if(!file.files || !file.files[0]){
		  return;
	   }
	   var reader = new FileReader();//读取文件
	   reader.onload = function(event){//文件读取完成的回调函数
		  image = document.getElementById('showImg');
		  image.src = event.target.result;//读入文件的base64数据(可直接作为src属性来显示图片)
		  //alert(event.target.result);
		  //图片读取完成的回调函数（必须加上否则数据读入不完整导致出错！）
		  image.onload = function(){
			  canvas = convertImageToCanvas(image); //图片转canvas 
			  base64 = canvas.toDataURL('image/jpeg'); //将图片数据转为base64.
			   //alert(base64);
			   $.post( 
				"/server_interface_url/", //服务器接口(返回图片路径)
				{data:base64}, 
				function(data) {
					alert(data.target);
					//alert(eval(data));
					//修改上传文件的路径名字(图片完整路径)
					$('#img').val('http://path/'+data.target);
				}, "json");
		  }
	   }
	   //将文件已Data URL的形式读入页面
	   reader.readAsDataURL(file.files[0]);
   }
	// 把image 转换为 canvas对象  
	function convertImageToCanvas(image) {  
		// 创建canvas DOM元素，并设置其宽高和图片一样   
		var canvas = document.createElement("canvas");  
		canvas.width = image.width;  
		canvas.height = image.height;  
		// 坐标(0,0) 表示从此处开始绘制，相当于偏移。  
		canvas.getContext("2d").drawImage(image, 0, 0);  
	  
		return canvas;  
	}
</script>

原始页面效果如下：