jquery ajax一起提交文件和表单元素（运用FormData）

最新推荐文章于 2023-04-11 17:22:06 发布

wsx_iot

最新推荐文章于 2023-04-11 17:22:06 发布

阅读量8.4k

点赞数 1

分类专栏： web 文章标签： jquery ajax 异步提交 form FormData

本文链接：https://blog.csdn.net/qq_29630271/article/details/53189812

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近开发遇到要上传文件和表单元素，表单元素是上传文件的描述，要一起上传，这里我探索出来两个可行路径。

1.运用jquery ajax和FormData上传
formdata.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormData</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <input id="con" type="text"/>
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">submit</button>
</script>
    <script type="text/javascript">
        $(function(){
            $("#upload").click(function(){

                var formdata = new FormData();
                formdata.append("name", $("#con").val());
                formdata.append("photo", $("#file")[0].files[0]);
                $.ajax({
                    url:"server.php",
                    type:"POST",
                    data:formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success:function(data){
                        alert(data);
                    }
                });
            });
        });
    </script>
</body>
</html>

server.php

<?php  
    $na = $_POST['name'];
    echo $na . " Upload: " . $_FILES["photo"]["name"];
    move_uploaded_file($_FILES['photo']['tmp_name'], time().".PNG");//保存在该路径
?>

java部分代码，只是说明问题，不全

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req;
MultipartFile multipartFile = multipartRequest.getFile("img");
File targetFile = new File("要存的文件路径");
multipartFile.transferTo(targetFile); 
String arr =multipartRequest.getParameter("element");

可能会有一些编码问题，上述这个提交可能和我下面说的提交表单的差不多，我没有试验。

2.运用form表单提交文件

<form enctype="multipart/form-data" accept-charset="utf-8">
........
</form>

可用jquery的表单插件异步提交表单，也可用formdata以存在表单构造新表单异步提交。

参考链接：
1.https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
2.http://blog.csdn.net/ystyaoshengting/article/details/45965981

wsx_iot

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
jquery ajax一起提交文件和表单元素（运用FormData）

最近开发遇到要上传文件和表单元素，表单元素是上传文件的描述，要一起上传，这里我探索出来两个可行路径。
复制链接

扫一扫

专栏目录

jquery ajax一起提交文件和表单元素（运用FormData）

最近开发遇到要上传文件和表单元素，表单元素是上传文件的描述，要一起上传，这里我探索出来两个可行路径。

可能会有一些编码问题，上述这个提交可能和我下面说的提交表单的差不多，我没有试验。

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