dojo小例子(17)iframe上传文件到rest后台,以及乱码问题解决

前端之家收集整理的这篇文章主要介绍了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")
至此,就实现了文件上传功能,还对乱码进行了处理。 原文链接:https://www.f2er.com/dojo/291160.html

猜你在找的Dojo相关文章