码迷,mamicode.com
首页 > Web开发 > 详细

工作中如何使用ajax提交form表单,包括ajax文件上传

时间:2017-06-23 23:03:42      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:文件的   value   pos   jaxp   hidden   上传文件   ajax文件上传   lte   psu   

提供一种方法就是利用jquery.form.js,我们是和java对接的后台。

代码如下:

<input type="text" id="text1">

<input type="text" id="text2">

<input type="text" id="text3">

<form method="post" enctype="multipart/form-data" id="formSubmit">

<div class="wrapBox">

<div class="fileBox clearfix">

<span class="pull-left">上传文件:</span>

<input type="file" class="pull-left" id="loadFile" name="uploadFile">

</div>

</div>

<div class="wrapSubmitBox clearfix">

<input type="button" id="submitBtn" value="提交">

<input type="hidden" id="ajaxParam" name="ajaxParam">

</div>

</form>

//上传文件的input  和提交按钮要写在form里面。<input type="hidden" id="ajaxParam" name="ajaxParam">是存储$(“#text1”),$(“#text2”),$(“#text3”)需要传给后台的数据。

 

 

Js:

$("#formSubmit").click(function(){

var valtext1=$("#text1").val();

var valtext2=$("#text2").val();

var valtext3=$("#text3").val();

uploadJsonData="{‘text1‘:"+valtext1+",‘text2‘:"+valtext2+",‘valtext3‘:"+valtext3+"}";

$("#ajaxParam").val(uploadJsonData);

$("#formSubmit");

var options = {

url:‘上传地址‘,

type:‘post‘,

success:function(data){

if(data.success==1){

alert(‘上传成功‘)

}

},

error:function(){

}

};

$("#formSubmit");.ajaxSubmit(options);

});

 

工作中如何使用ajax提交form表单,包括ajax文件上传

标签:文件的   value   pos   jaxp   hidden   上传文件   ajax文件上传   lte   psu   

原文地址:http://www.cnblogs.com/kelly2017/p/7071807.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!