dojo小例子（17）iframe上传文件到rest后台，以及乱码问题解决

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;}

2、iframe的代码

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的实例当中。

因为页面对form中的值进行了编码，后台还需进行相应解码

java.net.URLDecoder.decode(form.getImageName(),"UTF-8")

至此，就实现了文件上传功能，还对乱码进行了处理。