当前位置: 首页>前端>正文

jquery提交form下载后 jquery提交form表单文件数据

使用jquery.form.js需要从网上下载。

jquery.form.js提交form表单插件提供了表单ajaxe提交解决方案,下面对比一下使用jquery自己的ajax提交和jquery.form的提交由啥不同。
通常没有使用jquery.form插件的情况下我们可以像下面代码来提交表单:

//jquery ajax 方式提交表单
    var $form = $("#form"),
        action = $form.attr("action");
    $form.on("submit",function(){
        $.post(action,$form.serialize(),function(res){
            //请求成功代码在这里
            alert("提交成功!");
        },'json');
        return false
    });
====================================
 
//jquery.form.js 的ajax提交表单
$('#form2').submit(function() {
        $(this).ajaxSubmit(function() {
            alert("提交成功!");
        });
        return false; //阻止表单默认提交
    });

 

jquery.form.js中ajaxSubmit()可以像上面代码一样只传递一个成功的回调函数,也可以传递更多参数,参数如下:

//jquery.form.js 中的ajaxSubmit() 可以是一个回调函数或者是更多参数,如下:
var options = {
//data: {},                 //表单上传之外,自己随意写额外的参数
        //url: url,                 //默认是form的action
        //type: type,               //默认是form的method(get or post)
        //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
        //clearForm: true,          //成功提交后,清除所有表单元素的值
        //resetForm: true,          //成功提交后,重置所有表单元素的值
        //target: '#output',          //把服务器返回的内容放入id为output的元素中
        //timeout: 3000,               //限制请求的时间,当请求大于3秒后,跳出请求
        //提交前的回调函数
        beforeSubmit: function(formData, jqForm, options){
            //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
            //jqForm:   jQuery对象,封装了表单的元素
            //options:  options对象
            //比如可以再表单提交前进行表单验证
        },
        //提交成功后的回调函数
        success: function(data,status,xhr,$form){},
        error: function(xhr, status, error, $form){},
        complete: function(xhr, status, $form){}
    };

====================

下面我们来一段jquery.form表单提交的实战例子完整代码:

$('#formLogin').on("submit",function() {
        $(this).ajaxSubmit(
            {
                //url: url,                 //默认是form的action
                //type: type,               //默认是form的method(get or post)
                //dataType: "json",           //html(默认), xml, script, json...接受服务端返回的类型
                //clearForm: true,          //成功提交后,清除所有表单元素的值
                //resetForm: true,          //成功提交后,重置所有表单元素的值
                target: '#output',          //把服务器返回的内容放入id为output的元素中
                //timeout: 3000,               //限制请求的时间,当请求大于3秒后,跳出请求
                //提交前的回调函数
                beforeSubmit: function(arr,$form,options){
                    //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
                    //jqForm:   jQuery对象,封装了表单的元素
                    //options:  options对象
                    //比如可以再表单提交前进行表单验证
                    console.log("beforeSubmit",arr,$form,options)
                },
                //提交成功后的回调函数
                success: function(data,status,xhr,$form){
                    console.log("success",data,status,xhr,$form);
                    if(data.Flag){
                        console.log(data.Content)
                    }
                },
                error: function(xhr, status, error, $form){
                    console.log("error",xhr, status, error, $form)
                },
                complete: function(xhr, status, $form){
                    console.log("complete",xhr, status, $form)
                }
            }
        );
        return false; //阻止表单默认提交
    });

以下是使用options,同时可以在beforeSubmit提交前进行验证,在success后显示结果提示或是否跳转

$(document).ready(function() { 
 var options = { 
  target: '#output1', 
  // 从服务传过来的数据显示在这个div内部 
 也就是ajax局部刷新 
  beforeSubmit: showRequest, 
 // ajax提交之前的处理 
  success:  showResponse 
 // 处理之后的处理 
 }; 
 $('#showDataForm').submit(function() { 
  $(this).ajaxSubmit(options); 
  return false;  
  //非常重要,如果是false,则表明是不跳转 
  //在本页上处理,也就是ajax,如果是非false,则传统的form跳转。 
 }); 
}); 
function showResponse(responseText, statusText, xhr, $form) { 
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' +  
 statusText + '\n\nresponseText: \n' + responseText); 
//xhr:说明你可以用ajax来自己再次发出请求 
//$form:是那个form对象,是一个jquery对象 
//statusText:状态,成功则为success 
//responseText,服务器返回的是字符串(当然包括html,不包括json) 
} 
function showRequest(formData, jqForm, options) { 
 //formData是数组,就是各个input的键值map数组 
 //通过这个方法来进行处理出来拼凑出来字符串。 
 //formData:拼凑出来的form字符串,比如name=hera&password, 
 //其实就是各个表单中的input的键值对, 
 //如果加上method=XXXX,那也就是相当于ajax内的data。 
 var queryString = $.param(formData); 
 alert(queryString+"======"+formData.length); 
 for (var i=0; i < formData.length; i++) { 
 alert(formData[i].value+"==============="+formData[i].name); 
 } 
 //jqForm,jquery form对象 
 var formElement = jqForm[0]; 
 alert($(formElement).attr("method")); 
 alert($(jqForm[0].name).attr("maxlength")); 
 //非常重要,返回true则说明在提交ajax之前你验证 
 //成功,则提交ajax form 
 //如果验证不成功,则返回非true,不提交 
 return true; 
 
}

个人代码:

$("#form1").ajaxSubmit({
                                dataType: "json",//这个地方与控制器传过来的数据类型一致
                                type: "Post",
                             url: _rootUrl + "InputExcel/InputExcelData",//默认是form1的action
data:{ 'filePath': strPath, 'tabName': $('#ddlInputTable').val(),},                               
success: function (data) {
                                    if (data.state == 1) {
                                        alert("导入成功!");
                                    } else {
                                        alert("导入失败!\r\n" + data.msg);
                                    }
                                }
                            })

 <input type="file" />
<form id="form1" method="post" enctype="multipart/form-data" >

不管上传文件还是导入excel数据,必须使用enctype="multipart/form-data":

因为如果不加这句话,获取的仅仅是本地此文件的路径,传到服务器端根本没办法使用客户端的文件路径。

加上这句就是以文件流的形式传送文件,在后台传文本框的内容得到的是本地文件路径。而使用

HttpPostedFileBase postFile = Request.Files["selPath"];
 string fileName = postFile.FileName;

获取的也仅仅是文件名,因为它并没有把文件上传到服务器的硬盘上,而是把文件以流的形式上传,同时也能得到文件名。我们使用流。

上传文件到服务器:

HttpPostedFileBase postFile = Request.Files["fileUp"]; 
string fileName = Path.GetFileName(postFile.FileName); 
 string dir = Path.Combine(Request.MapPath("~/FileUpload"), fileName ); 
 postFile.SaveAs(dir);//保存文件

读取excel流:

HttpPostedFileBase postFile = Request.Files["selPath"]; 
string fileName = Path.GetFileName(postFile.FileName);



https://www.xamrdz.com/web/2tu1922070.html

相关文章: