Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇。有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发;
前几天,发现了一些小问题。我在写后台管理页面时,需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件;
Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的;
但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新;
这样我们可以先到异步的Ajax可以实现局部刷新;
废话不多说了 直接上代码;
首先是html:
<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">类型</td>
<td>: <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">名称</td>
<td>: <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">开始时间</td>
<td>: <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">结束时间</td>
<td>: <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">省</td>
<td>: <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style="text-align: right;">市</td>
<td>: <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">门店</td>
<td>: <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">具体地址</td>
<td>: <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
</table>
</form>
<form id = "form_sub" style = "font-size: 13px;">
<table style="font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">上传图片</td>
<td>: <input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'选择上传图片',buttonText:' 选 择 '"></td>
<td><input type = 'text' id = "Item" name = 'item' style = "display:none;"></td>
</tr>
</table>
</form>
<div style = "text-align:right; padding:2px 5px;">
<a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:'icon-ok'" href = "javascript:void(0)">
保存
</a>
<a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">
取消
</a>
</div>
以上是html代码,为了方便大家copy,css直接在标签里了;
有很多朋友想问,为什么写两个form表单;
这是因为根据后台接收数据的需求,传的是信息变成字符串和图片;
首先把信息变成字符串;
再放到第二个Form表单里,细心地朋友发现在第二个form表单里<input>标签里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表单及文件上传的更多相关文章
- Django的form表单之文件上传
在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...
- php+form表单的文件上传
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 2020最新Servlet+form表单实现文件上传(图片)
servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...
- form表单多文件上传
1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- 使用ajax提交form表单,包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- Ajax提交form表单内容和文件(jQuery.form.js)
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- Ajax提交Form表单的一种方法
待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...
随机推荐
- JavaScript那些事儿(01): 对象
一. 对象是什么 是单身童鞋们正在查找的“对象”吗?是的,他/她就是活生生的对象. Javascript是一种基于对象的语言, 你遇到的所有东西几乎都是对象. 但它又不同于基于类的语言.那么“类”又是 ...
- python列表、字典与csv
在日常数据分析时最常打交道的是csv文件和list,dict类型.涉及到的主要需求有: 将一个二重列表[[],[]]写入到csv文件中 从文本文件中读取返回为列表 将一字典写入到csv文件中 从csv ...
- [逼死强迫症 - C&C++设计风格选择.1] : 命名规范
1.命名规范 本系列的第一篇,命名风格本就是有关艺术审美,没有美与丑的绝对标准,本文难免带有主观选择倾向,但是会尽量保持客观的态度归纳几种主流的命名风格,仅供参考.制定规范是为了方便团队沟通和利于代码 ...
- AfxMessageBox("这里为提示框的内容");程序弹出一个提示窗口,可以做调试提示信息
AfxMessageBox("这里为提示框的内容"); 同时AfxMessageBox(AFX_IDP_PARSE_INT);里面也可以系统宏定义的一些参数
- #include<unistd.h>存在linux中,含有系统服务的函数
#include<unistd.h> linux标准库#include <unistd.h>与windows的#include <windows.h>(C语言开发) ...
- 绘图时,根据size()和自定义rect编程的区别
在绘图的时候,很多时候编写的代码需要根据当前窗口自身的size来进行绘制,这个时候可以添加一个额外的中间rect来做过度,这样以后的绘图机制不会 随着size的变化而不断变化.你的处理逻辑可以保持不变 ...
- grails-MappingException: Could not determine Type
在用grails的时候遇到这个问题,反复调试了很久,没有进展,同时敲了几个命令后好了,真纠结,这是框架的问题吗? 问题: Caused by MappingException: Could not d ...
- fedora 安装nginx+php+mysql
环境 fedora 最新版 20 参考:http://www.cnblogs.com/beceo/archive/2012/08/21/2648378.html ------------------- ...
- 【转】火火火火火!看HomeKit如何改变物联网和智能家居?
摘要: 智能家居并非新概念,然而在苹果等巨头插足之前,它却只是一盘散沙,各自为营,苹果又将如何凭借HomeKit构建起拥有统一界面和控制中心的平台来实现各种智能家居设备与应用之间的无缝连接,真正实现智 ...
- Android 数据库读取数据显示优化 Application [6]
Application和Activity,Service一样是android框架的一个系统组件, 当android程序启动时系统会创建一个application对象,用来存储系统的一些信息. 通常我们 ...