wsxiot的博客

IT民工搬砖记录

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

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

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

阅读更多
版权声明:如有侵权,请联系,如有错误,望指正,欢迎转载 https://blog.csdn.net/qq_29630271/article/details/53189812
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭