js上传文件或图片至后台

2024年5月11日 121次阅读 来源: zeroyulong

一、jq

XMLHttpRequest Level2 添加了一个新的接口——FormData 。【 主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的Ajax相比，它能异步上传二进制文件 】

利用FormData对象，可通过js用一些键值对来模拟一系列表单控件，还可以使用XMLHttpRequest的send()方法异步提交表单。

首先，在之前的“前后台交互之传参方式”中讲了传统的form表单提交的方式（表单序列化），它只适用于传递一般参数，上传文件的文件流是无法被序列化并传递的。所以，使用FormData，可以轻松的和ajax结合进行文件上传。

html

<form action="" method="post" id="uploadF">
					
					<div>上传文件：</div><input name="file" type="file" id="uploadFile" value="" />

</form>

js

$('#uploadFile').change(function() {
		var form = document.getElementById("uploadF");
		var formData = new FormData(form);
		formData.append('testName', '我是传送文件标识')
		console.log(formData.get('file'));
        $('#loading').show();
		$.ajax({    
			type: "post",
			url: domain + ads.uploadads,
			data: formData,
			processData: false,//告诉jq不要处理发送的数据
			contentType: false,//告诉jq不要设置content-Type请求头
			success: function(res) {
                console.log(res)
            }
        });

})

相当于进行了表单提交，后台开发人员接收到数据操作即可。

二、fetch（无需设置content-type！！）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>fetch上传文件</title>
  </head>
<body>
 <input type="file" id="files" onchange="upload(event)"/>
 <script type="text/javascript">
   function upload(event) {
     const formData = new FormData();
     formData.append('file', event.target.files[0]);
     fetch('/upload', {
       method: 'post',
       body: formData,
       }).then(response => response.json())
       .then((data) => {
            console.log(data);
       });
      }
 </script>
</body>
</html>

 

 

    原文作者：zeroyulong
    原文地址: https://blog.csdn.net/zeroyulong/article/details/84302086
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞