利用formData,在使用form表单提交参数(或者文件)时,处理回调函数

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fantasic_van/article/details/76423201

我们通常在使用传统的form表单进行传参或者上传文件时,只要提交了参数,会有以下两个问题:
1、无法处理回调函数
2、页面会刷新

  • 1、拿一个很简单的图片做例子,如图
    这里写图片描述

这里其实也有两种情况:
1)这里有参数,也有文件上传,很明显,这里的文件上传和参数提交,需要分开请求,但是文件上传这里也是一个表单,如果使用传统的表单提交,点了开始上传后,这个页面就会刷新,虽然文件上传过去了,但给人的体验很不好。
2)当这里是一个弹出层,例如layer.open打开的,如果点击开始上传后,页面刷新,这个弹窗就会关闭,那其他参数就无法正常提交了。

  • 2、解决如上问题的办法:
    使用jquery的一个formData的对象,使用如下:
<div id="setting-layer" style="position:relative;height:100%;overflow:hidden;">
    <div class="sug-box">
        <p>选择部门:<input id="orgTree"/><p/>
        <p>处理原因:</p><textarea id="sug"></textarea>
    </div>'
    <form id="addBillForm" method="post" enctype="multipart/form-data">
        <div class="file-box">'
            <span>文件上传</span><b class="file-path"></b>
            <input type="file" id="order-upload" name="file" onchange="getFilePath(this)">
            <label id="label-choose" for="order-upload">选择文件</label><button class="btn-upolad" id="fileUpload" type="button">开始上传</button>
        </div>
    </form>
    <button class="layui-btn" id="btn-sure">确定</button>
</div>

这里的代码就是上面的那张图的,可以看出,这里有一个form,用于文件上传,这里使用的是springmvc的MultipartFile,我另一篇文章有写这个的使用方法。
下面我们写js实现异步文件上传:

 $('#fileUpload').click(function(){
    //初始化FormData函数,传入的是一个form
    var formData = new FormData($("#addBillForm")[0]);
    //formData.append('sgid',_sgId); 添加表单之外的参数
    $.ajax({
          url: '${path}/bill/uploadFile',
          type: 'POST',  
          data: formData,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (data) {
              layer.msg('上传成功',{icon: 1});

          },  
          error: function (data) { 
              layer.msg("上传失败",{icon: 5});
          }  
     })
})

如上,当我们选择文件后,点击上传,页面也不会刷新,而且文件也上传成功了,这样我们可以继续处理我们这个页面的其他业务了。

ps: 当我们需要提交form之外的参数,可以使用

formData.append('sgid',_sgId);
展开阅读全文

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