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

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

步骤:

  1. 用button或者链接代替传统的form表单形式的sumbit提交方式。
  • 创建button按钮
 
  • 创建单击事件
/*点击文件下载*/
$('#upJQuery').on('click', function () {
    $('#upJQuery').after('');
    $('#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.服务器按照平常的表单上传形式接收即可。

你可能感兴趣的:(JavaScript)