刚刚申请下来的博客,写得第一篇。有点小激动,本人以前是一名工业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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'选择上传图片',buttonText:'&nbsp;选&nbsp;择&nbsp;'"></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>&nbsp;&nbsp;&nbsp;&nbsp;
<a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">
取消
</a>&nbsp;&nbsp;&nbsp;&nbsp;
</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表单及文件上传的更多相关文章

  1. Django的form表单之文件上传

    在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. php+form表单的文件上传

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 2020最新Servlet+form表单实现文件上传(图片)

    servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...

  4. form表单多文件上传

    1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. 使用ajax提交form表单,包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  6. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  7. 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 ...

  8. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  9. Ajax提交Form表单的一种方法

    待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...

随机推荐

  1. Ubuntu12.4 64位 安装 arm linux gcc 4.3.2

    一.下载arm linux gcc 4.3.2 http://pan.baidu.com/share/link?shareid=1575352696&uk=2754759285&fid ...

  2. addEventListener之handleEvent

    addEventListener() 方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行.语法: element.addEventListener(type, ...

  3. plist解析, 简易实现.

    源码 class Xml { public: typedef std::pair<std::wstring, std::wstring> NodeT; static std::vector ...

  4. Mysql 源码编译教程贴

    题外话:这是一篇教程贴,不仅学的是mysql的编译,还是一些编译的知识.我也是一个菜鸟,写一些感悟和心得,有什么问题可以批评指正,谢谢! 如果只是为了安装请移到我的另一篇安装贴: Mysql安装贴 环 ...

  5. frame与iframe的区别?

    1.frame不能脱离frameSet单独使用,iframe可以 2.frame不能放在body中,否则不能正常显示 3.嵌套在frameSet中的iframe必需放在body中,不嵌套在frameS ...

  6. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. DIV隐藏与重显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 刷新页面大全

    一.先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom ...

  9. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  10. C语言学习--可变数组

    #ifndef _ARRAY_ #define _ARRAY_ typedef struct { int *array; int size; } Array; //此处定义结构数据类型 Array,虽 ...