关闭

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

标签: jqueryajax异步提交formFormData
1431人阅读 评论(1) 收藏 举报
分类:

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:24928次
    • 积分:842
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:6篇
    • 译文:0篇
    • 评论:7条
    文章分类
    最新评论