Marshal's Blog

weapon项目增加文件上传功能

为weapon项目增加了图片上传功能。

这需要服务器端（Spring MVC）和客户端（GWT）两部分程序。

spring mvc这部分比较简单。需要类库支持：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.1</version>
</dependency>

 

然后，需要配置spring的支持：

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="100000" />
</bean>

最后，写spring程序部分，需要至少传递一个id参数和一个文件内容部分。

@RequestMapping("/upload.do")
public void upload(@RequestParam("id") String id,
        @RequestParam("file") MultipartFile file,
        HttpServletRequest request, HttpServletResponse response) {
    try {
        if (id != null && !id.isEmpty()) {
            File image = new File(request.getSession().getServletContext()
                    .getRealPath("/images/" + id));
            if (image.exists()) {
                image.delete();
            }
            FileOutputStream outputStream = new FileOutputStream(image);
            outputStream.write(file.getBytes());
            outputStream.close();
            response.getWriter().append("ok");
        } else {
            response.getWriter().append("undo while no id");
        }
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}

 

客户端，代码有点儿乱，主要是事件处理部分，采用比较直接的方式写了这部分的对话框和处理代码。

点击图片，将弹出替换图片的对话框。这里面是一个form，和form提交的监听器，这里只写了提交成功的监听器。

@Override
public void setData(final Weapon weapon) {
    this.name.setValue(weapon.getName());
    this.description.setValue(weapon.getDescription());
    this.image = new Image("/getImage.do?id=" + weapon.getId() + "&time="
            + System.currentTimeMillis());
    this.detailsTable.setWidget(2, 1, this.image);

    this.image.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            final DialogBox dialogBox = new DialogBox();
            dialogBox.setText("替换图片");
            dialogBox.setGlassEnabled(true);
            dialogBox.setAnimationEnabled(true);
            VerticalPanel dialogContents = new VerticalPanel();

            final FormPanel form = new FormPanel();
            form.setAction("/upload.do");
            form.setEncoding(FormPanel.ENCODING_MULTIPART);
            form.setMethod(FormPanel.METHOD_POST);

            form.addSubmitCompleteHandler(new SubmitCompleteHandler() {
                @Override
                public void onSubmitComplete(SubmitCompleteEvent event) {
                    dialogBox.setGlassEnabled(false);
                    dialogBox.hide();
                    setData(weapon);
                }
            });
            dialogContents.add(form);

            HorizontalPanel uploadPanel = new HorizontalPanel();
            form.add(uploadPanel);

            final FileUpload fileUpload = new FileUpload();
            uploadPanel.add(fileUpload);
            fileUpload.setName("file");
            Hidden hidden = new Hidden("id", weapon.getId());
            uploadPanel.add(hidden);

            Button sendButton = new Button("上传", new ClickHandler() {

                @Override
                public void onClick(ClickEvent event) {
                    if (fileUpload.getFilename().isEmpty()) {
                        Window.alert("请选择文件后上传");
                    } else {
                        form.submit();
                    }
                }
            });
            uploadPanel.add(sendButton);

            Button closeButton = new Button("关闭", new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    dialogBox.setGlassEnabled(false);
                    dialogBox.hide();
                }
            });
            dialogContents.add(closeButton);

            dialogContents.setSpacing(4);
            dialogBox.setWidget(dialogContents);
            dialogBox.show();
        }
    });

源代码见：

http://easymorse.googlecode.com/svn/tags/Weapons-0.5.0

   发送文章为PDF