Ajax提交Form表单及文件上传的实例代码 - 网站

Ajax提交Form表单及文件上传的实例代码

分类：js_jQuery答疑 - 常见问题 · 发布时间：2021-10-07 12:06 · 阅读：10166

前段时间在做程序的时候发现一个小问题，在写后台管理上传图片时，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新，下面小编通过分享本文给大家解析下

前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件；

Form表单上传图片只需要在

标签里加上enctype = 'multipart/form-data'，这样是可以上传图片的；

但问题来了，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新；

这样我们可以先到异步的Ajax可以实现局部刷新；

废话不多说了 直接上代码；

首先是html：

  
 
 类型:  
 名称:  
 开始时间:  
 结束时间:  
 省:  
 市:  
 门店:  
 具体地址:  
 
 
 上传图片:  
  保存       取消     

以上是html代码，为了方便大家copy，css直接在标签里了；

有很多朋友想问，为什么写两个form表单；

这是因为根据后台接收数据的需求，传的是信息变成字符串和图片；

首先把信息变成字符串；

再放到第二个Form表单里，细心地朋友发现在第二个form表单里标签里style=“display：none”这是个隐藏的标签；

不错我是通过第一个form表单获取的数据通过js变成字符串再放到隐藏的标签里；

这样通过Ajax提交第二个Form表单就可以了；

js代码：

 $( '#sub' ).click( function () { 　　var actTimeStart1 = $ ('#actstarttime') . datebox ('getValue'); 　　var actTimeStart = changeDateToLong(actTimeStart1); 　　var actTimeEnd1 = $('#actendtime').datebox('getValue'); 　　var actTimeEnd = changeDateToLong(actTimeEnd1); 　　if(actTimeStart != '' && actTimeEnd != '' && (actTimeStart - actTimeEnd > 0)){ 　　　　$.messager.alert('警告','结束时间不能小于开始时间！','error'); 　　　　return false; 　　} 　　else{ 　　　　if ($('#form_insert').form('validate')) { 　　　　　　var actType = document.getElementById("acttype").value; 　　　　　　var actName = document.getElementById("actname").value; 　　　　　　var actArea = document.getElementById("actadd").value; 　　　　　　var actTimeStart1 = $('#actstarttime').datebox('getValue'); 　　　　　　var actTimeStart = changeDateToLong(actTimeStart1); 　　　　　　var actTimeEnd1 = $('#actendtime').datebox('getValue'); 　　　　　　var actTimeEnd = changeDateToLong(actTimeEnd1); 　　　　　　var t2 = $('#mem_Shop').combobox('getValue'); 　　　　　　var jsonObj = {actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2}; 　　　　　　var activityMemberJson = JSON.stringify(jsonObj); 　　　　　　document.getElementById("Item").value=activityMemberJson; 　　　　　　var form = new FormData(document.getElementById("form_sub")); 　　　　　　$.ajax({ 　　　　　　　　url : ../activity/actionActivityInsert', //http://www.cnblogs.com/jayxxxxxxx/ 　　　　　　　　type : "post", 　　　　　　　　data : form, //第二个Form表单的内容 　　　　　　　　processData : false, 　　　　　　　　contentType : false, 　　　　　　　　error : function(request) { 　　　　　　　　}, 　　　　　　　　success : function(data) { 　　　　　　　　　　$('#box').datagrid('reload'); 　　　　　　　　} 　　　　　　}); 　　　　　　window_open($('#insert_form'), 'close'); 　　　　}else { 　　　　　　$.messager.alert('警告' , '信息不完整!' , 'error'); 　　　　} 　　} });

大家看到了我用了FormData方法，说真的这个在html5里实在是太好用了，上传图片都不用再写enctype = 'multipart/form-data'；

标签：
ajax form 上传

相关文章

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

AJAX的跨域问题解决方案

跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

利用Ajax实现智能回答的机器人示例代码

这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

ajax、axios和fetch之间优缺点重点对比总结

今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下

如何通过axios发起Ajax请求(最新推荐)

Axios是专注于网络数据请求的库，相比于原生的XMLHttpRequest对象，axios简单易用。相比于Jquery，axios更加轻量化，只专注于网络数据请求，这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下
返回分类 返回首页