ajax同时提交表单且包含文件

最新推荐文章于 2022-08-03 22:15:45 发布

weixin_30719711

最新推荐文章于 2022-08-03 22:15:45 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/zxg-blog/p/6743094.html

本文介绍了两种使用HTML5 FormData对象进行文件上传的方法。第一种方法直接利用FormData与Ajax结合实现文件上传；第二种方法借助jquery.form.js简化上传过程，并提供了后台处理文件上传的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明一下：FormData对象是html5的一个对象，目前的一些主流的浏览器都已经兼容。ie8暂时不支持，不支持FormData的，可以使用方法二，下面会介绍。接着说FormData，它是一个html5的javascript对象，非常的强大。废话不说，直接上代码

方法1

var formData = new FormData($("#passengerForm")[0]);//此处id为form表单的id

$.ajax({
                      url: "${basePath}/order/importPassengerExcel.json" ,
                      type: 'POST',
                      data: formData,
                      async: false,
                      cache: false,
                      contentType: false,
                      processData: false,
                      success: function (data) {
                          if(data.messageFlag.flag=="1"){

                           layer.msg("导入成功",{time:2000});
                      }else{
                             layer.msg("导入错误",{time:2000});
                          }
                      },
                      error: function (data) {
                         layer.msg("导入错误",{time:2000});
                      }
                 });

方法2

使用jquery.form.js（可以具体查看api）

<form id="tf">
            <input type="file" name="img"/>
            <input type="text" name="username"/>
            <input type="button" value="提" onclick="test();"/>
        </form>

$("#tf").ajaxSubmit();

后台代码
if (certificate==null ||certificate.isEmpty()) {
        } else {
            // 获取上传文件的名称
            String fileName = certificate.getOriginalFilename();
            // 获取图片的扩展名
            String extensionName = fileName
                    .substring(fileName.lastIndexOf(".") + 1);
            // 重命名上传后的文件名
            String imgname = MD5.encrypt(UUID.randomUUID().toString()) + "."
                    + extensionName;
            try {
                String imgPath = PropertyUtils.getValue("sftpdirectory_images");
                File targetFile = new File(imgPath, imgname);
    if (!targetFile.exists()) {//此处判断不是特别理解
                    targetFile.mkdirs();
                    certificate.transferTo(targetFile);
                } else {
                    logger.error("上传失败");
                }
                saveImgUrl = imgname;
            } catch (Exception e) {
                flag="2";
                logger.error("上传失败", e);
            }
        }