ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客，写得第一篇。有点小激动，本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发；
前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的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'；
第一次写博客，希望大家多提一些建议；
午休中。。。。。。。
Django的form表单之文件上传
在生成input标签的时候可以指定input标签的类型为file类型
php+form表单的文件上传
...2020最新Servlet+form表单实现文件上传(图片)
servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...
form表单多文件上传
1.html/jsp主页
使用ajax提交form表单，包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
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表单的一种方法
待提交的表单
随机推荐
Ajax的同步与异步