最近项目中遇到了在表单中出现图片的上传,要求图片点击上传后能够看到传去的图片,然后填写表单提交给后台做处理,总结一下这样做的技术和思路
1 使用jquery-form 的js库,使用form表单的ajax体积
2 将要上传图片的表单单独封装在一个页面里,然后使用<iframe>标签嵌套在主表单里面,
这样做的好处是:(1) 能够被其他上传的页面复用
(2)在使用jquery-valiad插件做表单验证时如果上传表单form嵌套在主表单form里面时,上传表单在使用js获取的时候获取不到上传图片的表单form就没法上传 图片。
3 在上传图片的页面里使用ajax form上传时在上传成功的回掉函数里吧上传成功的图片名称赋值到主表单的隐藏字段里面以便能够传到后台去
4 表单提交验证使用jquery-validate插件
5 代码展示