您的位置:首页 > 其它

使用FormData来提交表单同时上传文件到服务端

2017-08-19 17:46 996 查看
jsp代码:

<form action="${pageContext.request.contextPath}/transformTemplateController/saveTransformTemplate" method="post" id="dataForm" enctype="multipart/form-data" >
    <div region="center" border="false" style="padding: 5px; background: #fff; border: 1px solid #ccc;">
    <table style="width: 420px;" cellpadding="6" cellspacing="1" >
    <tr>
<td align="right">
<label class="Validform_label">
选择模板:
</label>
</td>
<td class="value">
<input id="template" name="template"  type="file" style="width: 150px" class=""  datatype="*"/>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
模板名:
</label>
</td>
<td class="value">
<input id="templateName" name="templateName" type="text" style="width: 150px" class="inputxt"  datatype="*"/>
</td>
</tr>
<tr id="path">
<td align="right">
<label class="Validform_label">
模板路径:
</label>
</td>
<td class="value">
<input id="templatePath" display="none" name="templatePath"  type="text" style="width: 150px" class=""  datatype="*"/>
</td>
</tr>
<tr id="group">
<td align="right">
<label class="Validform_label">
模板组:
</label>
</td>
<td class="value">
<input id="templateGroup" name="templateGroup" type="text" style="width: 150px" class="inputxt"  datatype="*"/>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
模板优先级:
</label>
</td>
<td class="value">
<input type="radio" id="templatePriority1" checked="checked" name="templatePriority"  value="1"/>普通
<input type="radio" id="templatePriority2" name="templatePriority" value="2"/>优先
</td>
</tr>

</table>
</div>
<div region="south" border="false" style="text-align: center; height: 30px; line-height: 20px;" align="center">
<a class="easyui-linkbutton" iconCls="icon-ok" onclick="submitwindow()">确定</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#templateWindow').window('close')">取消</a>
</div>
</form>


js代码:

function submitwindow(){
$("#templateName").focus(function(){
var template = $('#template').val();
if(template==""){
    $.messager.alert('提示', '<font color=red>请选择模板!</font>', 'info', function(){$("#template").focus()});
   return;
   }else{
var fileName=template.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1"); 
$('#templateName').val(fileName);
}
});
//将模板名设置为上传的文书模板名
   if(template==""){
    $.messager.alert('提示', '<font color=red>请选择模板!</font>', 'info', function(){$("#template").focus()});

      return;
   }
   
  var fileType = $('#template').val();
   if(fileType != null && fileType != ""){
    var start = fileType.lastIndexOf(".")+1;
var length = fileType.length;
var finalType = fileType.substring(start,length);
if(finalType !="doc" && finalType != "docx"){
alert("文书模板只支持doc和docx格式");
return;
  }
   }
   //$("#dataForm").submit();
 
var form = new FormData(document.getElementById("dataForm"));
var idd = $('#templateId').val();
form.append("id",idd);
  $.ajax({

                url:"${pageContext.request.contextPath}/transformTemplateController/saveTransformTemplate",

                type:"post",

                data:form,

                processData:false,

                cache: false,

                contentType:false,

                success: function(obj){
    tip("操作成功!");
    $('#templateWindow').window('close');
    reloadTable('templateList');
},

                error:function(e){

                    $.messager.alert('提示', '<font color=red>出现异常,请重试!</font>', 'info');

                }

            });        
}

controller代码:

/**
* 根据数据实体保存新增数据包括文件上传到fastdfs
* @param transformTemplate 数据实体
* @return 
* @throws MyException 
* @throws IOException 
*/
@RequestMapping("/saveTransformTemplate")
public @ResponseBody InvokeResult saveTransformTemplate(ETransformTemplatetransformTemplate,MultipartFile template) throws IOException, MyException {
//上传到fastdfs并返回模板路径和模板组
UploadEntry entry = new UploadEntry(template.getSize(), template.getInputStream(),template.getOriginalFilename());
UploadResult result = FdfsClient.getZefuStorageClient().uploadFile(entry);
transformTemplate.setTemplatePath(result.getFilename());
transformTemplate.setTemplateGroup(result.getGroup());
System.out.println(transformTemplate.getId());
this.transformTemplateService.saveTransformTemplate(transformTemplate);
return InvokeResult.success();
//return "redirect:/ transformTemplatePage "; 
}

附上mapping.xml代码:

<!-- 根据实体对象保存数据,并将新增的主键值返回至实体 -->

<insert id="saveTransformTemplate" useGeneratedKeys="true" keyProperty="id" keyColumn="ID"parameterType="com.dserms.manage.model.po.system.ETransformTemplate">
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id" keyColumn="ID" >
select SEQ_TRANSFORM_TEMPLATE.currval from dual
</selectKey>
insert into E_TRANSFORM_TEMPLATE(ID,<include refid="insertColumn"></include>)
values(SEQ_TRANSFORM_TEMPLATE.nextval,<include refid="insertValue"></include>)

</insert>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐