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

原创 2016年11月16日 18:35:11

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

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

使用jquery提交FormData数据

html> head> title>测试title> meta charset="utf8"> script src="../js/jquery-1.11.3.min.js">...
  • u011500781
  • u011500781
  • 2017年02月09日 09:43
  • 7641

jQuery插件 -- Form表单插件jquery.form.js

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi...
  • zzq58157383
  • zzq58157383
  • 2012年07月06日 12:24
  • 162784

JQuery Ajax使用FormData对象上传文件 图片

通过jQuery Ajax使用FormData对象上传文件FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。在 Mozilla ...
  • xllily_11
  • xllily_11
  • 2016年08月26日 17:19
  • 15678

ajaxform实现文件和表单信息一起提交

项目中有个模块提交表单需要提交文件和其他的一些表单信息,发现ajaxform实现起来较简易function sub(){ var value = $('select option:s...
  • xgm930090280
  • xgm930090280
  • 2017年04月14日 14:01
  • 609

form表单同时提交文件类型的input和普通input的方法

废话不多说,直接奔主题 大家都知道,当form表单中既要提交文本,又要上传图片时,必需在form表单中加上属性enctype ="multipart/form-data",但一加上这个属性,用req...
  • u012089657
  • u012089657
  • 2015年02月02日 17:41
  • 3307

在一个form表单里同时上传多个文件和文本信息的解决方案

  • 2013年06月07日 10:09
  • 157KB
  • 下载

通过jQuery Ajax使用FormData对象上传文件

html代码
  • u013066244
  • u013066244
  • 2016年10月27日 10:55
  • 3661

Multipart/form-data POST文件上传详解

Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下:   ...
  • xiaojianpitt
  • xiaojianpitt
  • 2011年10月09日 17:45
  • 286722

Jquery FormData文件异步上传 快速指南

网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题;...
  • a610786189
  • a610786189
  • 2017年04月08日 20:13
  • 239

用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单

前两天用到ajax提交含上传图片的表单。实现的功能比较简单,但是使用ajax提交表单 form.serialize只能实现普通的字段提交,上传图片却不能使用。 网上很多都是推荐使用jquery.fo...
  • Limyrain
  • Limyrain
  • 2016年04月19日 12:33
  • 5513
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery ajax一起提交文件和表单元素(运用FormData)
举报原因:
原因补充:

(最多只允许输入30个字)