dojo小例子17iframe上传文件到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")

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