dojo1.6 + spring3 实现文件上传(uploader)

大体说一下思路吧,今天研究了一整天,到处找资料,重复了无数遍,出现了很多问题,最后在N个正确或不正确的例子中完成了这个功能,还很简陋,有待完善。
先从dojo说起,


<script type="text/javascript">
    dojo.require("dojox.form.Uploader");
    dojo.require("dojox.form.uploader.FileList");
    dojo.require("dojox.form.uploader.plugins.IFrame");
</script>
<form method="post" action="<c:url value="saveUploadImg.json"/>" id="myForm" enctype="multipart/form-data" >
    <input name="uploadedfile" multiple="true" type="file" id="uploader" dojoType="dojox.form.Uploader" label="上传图片" >
    <input type="submit" label="Submit" dojoType="dijit.form.Button" />
    <div id="files" dojoType="dojox.form.uploader.FileList" uploaderId="uploader"></div>
</form>



dojox.form.Uploader:dojo1.6的最新上传组件,以前的FileUploader在2.0之前会保留,之后会删除
dojox.form.uploader.FileList:上传文件可以实现多文件上传,不过目前只是在IE中好用,chrom、firefox下只能选择一个文件,但是不能提交原因不知道,TODO。而且当前只是用html的实现,貌似还有一种flash的,一直没试成功,TODO。这个组件就是和upload绑定显示已选文件,可以列出所有,怎么修改样式还不知道,默认是鸟文。
dojox.form.uploader.plugins.IFrame:引入此组件可以实现ajax方式上传
enctype=”multipart/form-data”:只有加它才是上传文件的形式
label=”上传图片”:这个本来是设置组件中选择文件的按钮文字,可是在IE9里面显示的完全不是这个,兼容模式下可以。
uploaderId=”uploader”:设定FileList和Uploader关联
好吧,页面就说完了,但是实际上还有好几个工作没有做,比如上传成功后返回的json要接收并且把上传的文件在页面中弄个列表显示出来,特别是图片文件,后面解决(如果我不懒还发出来的话)
下面就是spring3的解决部分了。
第一步,在上下文中启动multipart解析器,来处理多重的请求。

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="100000"/>
</bean>

这样的话,你需要两个jar包,commons-fileupload.jar和commons-io.jar

@Entity
public class UploadItem implements Serializable {
    private String id;
    private MultipartFile uploadedfile0;
    private MultipartFile uploadedfile1;
    private MultipartFile uploadedfile2;
    private MultipartFile uploadedfile3;
    private MultipartFile uploadedfile4;
    private MultipartFile uploadedfile5;
    private MultipartFile uploadedfile6;
    private MultipartFile uploadedfile7;
    private MultipartFile uploadedfile8;
    private MultipartFile uploadedfile9;
    /*get set 方法太长,就不贴出来了*/
}

接收方法:

    @RequestMapping(value = "saveUploadImg.json", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> saveUploadImg_json(UploadItem ui, HttpSession session) {
        List<Map<String, String>> list = new ArrayList<Map<String, String>>();
        String path = session.getServletContext().getRealPath("/images/upload/"); // 获取本地存储路径
        FileOutputStream fileOutputStream = null;
        List<MultipartFile> file = new ArrayList<MultipartFile>();
        if(ui.getUploadedfile0() != null && !ui.getUploadedfile0().getName().equals("")) file.add(ui.getUploadedfile0());
        if(ui.getUploadedfile1() != null && !ui.getUploadedfile1().getName().equals("")) file.add(ui.getUploadedfile1());
        if(ui.getUploadedfile2() != null && !ui.getUploadedfile2().getName().equals("")) file.add(ui.getUploadedfile2());
        if(ui.getUploadedfile3() != null && !ui.getUploadedfile3().getName().equals("")) file.add(ui.getUploadedfile3());
        if(ui.getUploadedfile4() != null && !ui.getUploadedfile4().getName().equals("")) file.add(ui.getUploadedfile4());
        if(ui.getUploadedfile5() != null && !ui.getUploadedfile5().getName().equals("")) file.add(ui.getUploadedfile5());
        if(ui.getUploadedfile6() != null && !ui.getUploadedfile6().getName().equals("")) file.add(ui.getUploadedfile6());
        if(ui.getUploadedfile7() != null && !ui.getUploadedfile7().getName().equals("")) file.add(ui.getUploadedfile7());
        if(ui.getUploadedfile8() != null && !ui.getUploadedfile8().getName().equals("")) file.add(ui.getUploadedfile8());
        if(ui.getUploadedfile9() != null && !ui.getUploadedfile9().getName().equals("")) file.add(ui.getUploadedfile9());
        for (int i = 0; i < file.size(); i++) {
            if (!file.get(i).isEmpty()) {
                Map<String, String> m = new HashMap<String, String>();
                String fileName =  file.get(i).getOriginalFilename();
                String a = fileName.split("\\.")[1];
                String newName = "yt_" + new Date().getTime() + i + "." + a.toLowerCase();
                File files = new File(path + "/" + newName); // 新建一个文件
                try {
                    fileOutputStream = new FileOutputStream(files);
                    fileOutputStream.write(file.get(i).getBytes());
                    fileOutputStream.flush();
                } catch (Exception e) {
                    e.printStackTrace();
                }
                if (fileOutputStream != null) { // 关闭流
                    try {
                        fileOutputStream.close();
                    } catch (IOException ie) {
                        ie.printStackTrace();
                    }
                }
                m.put("path", path+"/");
                m.put("name", newName);
                m.put("size", String.valueOf(file.get(i).getSize()));
                list.add(m);
            }
        }
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("list", list);
        return map;
    }

解释一下,我们家的uploader名字叫做uploadedfile,但是组件式可以多文件形式的,所以IE下的命名方式为uploadedfile0-n,其他浏览器还各不相同,所以以上做法只针对IE浏览器。
似乎没遗漏什么,以上是对一天的辛勤翻阅做个总结,希望对找到这篇文章的人有所帮助。
不懒就待续。

查阅资料:spring文档 | google “dojox.form.Uploader” 查询

One thought on “dojo1.6 + spring3 实现文件上传(uploader)

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>