前端上传图片该如何传数据给后端，如果用ajax传递数据给后端

发布于 2022-09-05 08:54:06 字数 170 浏览 16 评论 0

<input type="file" name="uploadFiles"/>

除了uploadFiles外还要传递图片key等数据给后端，
用上述input选择图片后，传递数据会把图片路径还是图片数据传递给后端，
希望大家给讲讲怎么实现这个上传图片

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

朕就是辣么酷 2022-09-12 08:54:06

现在回答你的第一个问题，
会把图片数据上传给后端，不会把路径传过去。
第二个问题怎么实现，我想问你你对后端了解点吗。会php吗？
如果你会点的会就可以往下看了，
首先你需要一个服务器，本地的就行，比如xammp，
接着你要找到服务器的根目录，xammp 的目录为htdocs，
然后你在根目录下新建两个文件，upload.html和accept.php,一个是前端的，一个是后端的，都要放在这个目录里，
接着，看我的upload.html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form action="accept.php" method="post" enctype="multipart/form-data">//这里面的缺一不可
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>  
</body>
</html>

accept.php代码

<?php
  print_r($_FILES['file']);
?>

这是最简单的一种方式，但这是基本的原理

回复收藏 0

楠木可依 2022-09-12 08:54:06

https://developer.mozilla.org...
看一下这个API

回复收藏 0

━╋う一瞬間旳綻放 2022-09-12 08:54:06

后端是用什么接收呢，springboot还是servlet

回复收藏 0

他不在意 2022-09-12 08:54:06

一般是用FormData，如果是<input type="file">的话，首先是在change事件处理里用e.target.files[0];拿到文件缓存，然后new个FormData实例出来，再把刚才缓存的file用append方法填充到这个实例里，有其它数据也可以append进去，最后post发到后台即可。

回复收藏 0

~没有更多了~