使用Ajax替代传统的表单提交

目的：用ajax实现文件的上传，提升用户的使用感受。

步骤：

1. 用button或者链接代替传统的form表单形式的sumbit提交方式。

• 创建button按钮

 <button id="upJQuery" type="button">导入数据</button>

• 创建单击事件

/*点击文件下载*/
$('#upJQuery').on('click', function () {
    $('#upJQuery').after('<input type="file" id="upfile" name="file" style="display:none" onchange ="uploadFile()">');
    $('#upfile').click();

});

• 单击按钮button之后会在button按钮后面加上隐藏文件上传表单，并模拟单击事件click(),之后触发uploadFile()函数，文件传输任务转移

function uploadFile() {
    var fd = new FormData();
    fd.append("file", $("#upfile").get(0).files[0]);
    var url = app.config.basicRequestUrl + '/withdrawCash/import';
     $.ajax({
        url: url,
        type: "POST",
        processData: false,
        contentType: false,
        data: fd,
        success: function (result) {
            //成功之后
        },
        error: function (result) {
           //失败之后
        }
    });
}

• 实现是创建FromData对象（FormData对象负责将将数据编译程键值对的形式，用append()方法填充数据,$("#upfile").get(0).files[0]表示将jquery对象的第一个装换为JavaScript对象后获取第一个文件
  ），ajax发送文件，processData:false表示不去处理发送的数据，默认为true，表示将data中的数据进行序列化处理；contentType:false表示不设置内容类型,防止jquery胡乱操作导致服务器无法识别文件的起始位置。

2.服务器按照平常的表单上传形式接收即可。