form表单使用ajaxsubmit上传文件,并验证
2016-06-22 23:44
627 查看
在form表单提交时,需要上传图片,在上传前还需要验证表单中的数据是够要求,在表单提交之后,得到一个返回值,并执行一个返回函数。
为了满足要求,使用了jquery.form.js框架,完全能满足要使用的要求,先引入这个插件,可自行百度。
先写出html代码
为了满足要求,使用了jquery.form.js框架,完全能满足要使用的要求,先引入这个插件,可自行百度。
先写出html代码
<form id="pro_change"> <label>商品名称:</label><input type=text name="proname"id="uptdogPro_name" class="myinput"> <input type="hidden" name="proid" id="upproid" value="${loginUser.vuid}"/> <label style="padding-left:100px;">商品规格:</label><input type=text name="nature"id="uptdogPro_nature" class="myinput"><br /> <br /> <label>品牌名称:</label><select name="brandid" id="uptdogPro_brname"class="myinput" style="width:145px;"></select> <label style="padding-left:100px;">商品图片:</label><input type=file name="pictrues" id="uptdogPro_pic" multiple="multiple" onchange="previewMultipleImage(this,'uptpro_pic_show')"><br /> <br /> <label>所属类型:</label><select name="fid" id="uptdogPro_finame"class="myinput" style="widt 4000 h:145px;" onChange="changeER()"></select> <label style="padding-left:100px;">所属分类:</label><select name="tid" id="uptdogPro_tpname"class="myinput"></select><br /> <br /> <label>市 场 价 : </label><input type=text name="promarprice"id="uptdogPro_marpri" class="myinput"> <label style="padding-left:100px;">波 奇 价 : </label><input type=text name="bqpri"id="uptdogPro_bqpri" class="myinput"><br /> <br /> <label>商品销量:</label><input type=text name="prosales"id="uptdogPro_sales" class="myinput"> <label style="padding-left:100px;">商品库存:</label><input type=text name="inventory" id="uptdogPro_inven" class="myinput"><br /> <br /> <label>商品状态:</label><select name="status" id="uptdogPro_status"class="myinput"></select><br /> <br /> <label style="float:left;">商品介绍:</label><input type=file name="prointros" id="uptdogPro_intro" onchange="previewMultipleImage(this,'upproinfo_pic_show')"><br /> <br /> <a href="javascript:uptDogProInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a> </form>再是js代码
function uptDogProInfo(){ var ajax_option={ url:"productinfo_changeproducttt.action",//form 的action type:"post", //form 的method方法 beforeSubmit:checkUppro, //在表达提交前执行的验证函数 contentType: "application/x-www-form-urlencoded; charset=utf-8", //设置编码集 success:function(data){ //表单提交成功后执行的函数 alert("执行成功!"); } } $('#pro_change').ajaxSubmit(ajax_option); }
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- js数组实现图片轮播
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 在线用表单建立文件夹
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Jquery 表单取值赋值的一些基本操作
- js可突破windows弹退效果代码
- Flash 与 html 的一些实用技巧
- 插件管理框架 for Delphi(一)