1、上传文件的form必须是multipart/form-data类型。form里有一个文本框,值是中文“图片”,还有一个Uploader,主要是为了要他的dojo样式
<div id="theForm" data-dojo-type="dijit/form/Form" method="post" enctype="multipart/form-data" > <input id="name" data-dojo-type="dijit/form/TextBox" name="name" value="图片"/> <input id="idupfile" id="idupfile" data-dojo-type="dojox/form/Uploader" data-dojo-props="showInput:'before'" name='upfile' label="select" /> <button id="sbt" data-dojo-type="dijit/form/Button" type="button" onclick="handler()">submit</button> <button data-dojo-type="dijit/form/Button" type="reset" >reset</button> </div>可以用这两个css参数调整Uploader的样式:
.dijitUploadDisplayInput { font-size: 12px; width:100px; } .dijitButtonText{ font-size: 12px; }
iframe(url,{ form: "theForm",// form id data: { // 由于汉字提交到后台会出现乱码,所以先编码 color: encodeURI("汉字"),name: encodeURI("图片") },timeOut: 20000,handleAs: "json" // 反馈数据的处理方式是json }).then(function(r) { console.log(r); },function(error) { console.log(error); });做一些说明,其实form: "theForm" 就已经把整个form(文件以及文本框的汉字)都提交到后台了,但是这种方式提交到后台的汉字是乱码的。所以又用
data: { // 由于汉字提交到后台会出现乱码,所以先编码 color: encodeURI("汉字"),// 额外增加的一个值 name: encodeURI("图片")// 会覆盖原form中的name },把文本框的值单拿出来,编码,而且最后提交的是编码后的值,也就是把之前的覆盖了。
另外,还有一种解决提交时乱码问题的办法,就是把name附加到url后面“url?name=”+name
还有一点需要注意,form提交后,文本框的值被encodeURI("图片")的值所替换,所以需要在提交前,把文本框的值暂存一下,提交后再set进去。
3、rest后台是如何处理multipart/form-data类型的form的呢
引入resteasy-multipart-provider-2.3.3.Final.jar
import org.jboss.resteasy.annotations.providers.multipart.MultipartForm;
@POST @Path("/putImgForm") @Consumes(MediaType.MULTIPART_FORM_DATA) @Produces(MediaType.TEXT_HTML) public String putImgForm(@MultipartForm Image form) throws IOException{页面必须是post类型才能上传文件,所以后台也对应使用@POST声明。这个方法的json返回值必须是被<textarea></textarea>所包裹,而且方法必须声明为@Produces(MediaType.TEXT_HTML),返回值才能被iframe的handleAs: "json"正确解析。返回值的形式:
return "<textarea>{\"hello\": \"world\"}</textarea>";Image是一个pojo类:
import org.jboss.resteasy.annotations.providers.multipart.PartType; public class Image { @FormParam("name") private String imageName ; @FormParam("upfile") @PartType("image/gif") private byte[] image; @FormParam("color") private String color;
通过这样一系列声明处理,form中的文件以及文本框值就对应到了Image的实例当中。
java.net.URLDecoder.decode(form.getImageName(),"UTF-8")至此,就实现了文件上传功能,还对乱码进行了处理。 原文链接:https://www.f2er.com/dojo/291160.html