Пример ExtJS 4 File Upload + Spring MVC 3 (перевод)

Опубликовал – 26.09.2011

Этот урок расскажет вам как использовать ExtJS 4 File Upload Field в Spring MVC 3 .

ExtJs File Upload Form

Для начала, нам нужна форма загрузки файла. ExtJS 4 docs предоставляет нам несколько примеров.

Ext.onReady(function() {

    Ext.create('Ext.form.Panel', {
        title: 'File Uploader',
        width: 400,
        bodyPadding: 10,
        frame: true,
        renderTo: 'fi-form',
        items: [
            {
                xtype: 'filefield',
                name: 'file',
                fieldLabel: 'File',
                labelWidth: 50,
                msgTarget: 'side',
                allowBlank: false,
                anchor: '100%',
                buttonText: 'Select a File...'
            }
        ],

        buttons: [
            {
                text: 'Upload',
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: 'upload.action',
                            waitMsg: 'Uploading your file...',
                            success: function(fp, o) {
                                Ext.Msg.alert('Success', 'Your file has been uploaded.');
                            }
                        });
                    }
                }
            }
        ]
    });
});

HTML cтраница

Дальше в HTML странице мы должны создать div, куда мы собираемся рендерить ExtJS форму. Страница так же должна содержать требуемые импорты для ExtJS.

<html>
<head>
<title>Spring FileUpload Example with <a target="_blank" title="ExtJS" href="http://sencha.com/">ExtJS</a> 4 Form</title>

    <!-- <a target="_blank" title="Ext JS" href="http://sencha.com/">Ext JS</a> Files -->
    <link rel="stylesheet" type="text/css" href="/extjs4-file-upload-spring/<a target="_blank" title="extjs" href="http://sencha.com/">extjs</a>/resources/css/ext-all.css" />
    <script type="text/javascript" src="/extjs4-file-upload-spring/<a target="_blank" title="extjs" href="http://sencha.com/">extjs</a>/bootstrap.js"></script>

    <!-- file upload form -->
    <script src="/extjs4-file-upload-spring/js/file-upload.js"></script>

</head>
<body>

    <p>Click on "Browse" button (image) to select a file and click on Upload button</p>

    <div id="fi-form" style="padding:25px;"></div>
</body>
</html>

FileUpload бин

Еще мы должны создать FileUpload бин чтобы предоставить файл как multipart:

package com.loiane.model;

import org.springframework.web.multipart.commons.CommonsMultipartFile;

public class FileUploadBean {

    private CommonsMultipartFile file;

    public CommonsMultipartFile getFile() {
        return file;
    }

    public void setFile(CommonsMultipartFile file) {
        this.file = file;
    }
}

File Upload Controller

Теперь нам нужен контроллер для обработки запросов, используем Spring MVC 3.

package com.loiane.controller;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.loiane.model.ExtJSFormResult;
import com.loiane.model.FileUploadBean;

@Controller
@RequestMapping(value = "/upload.action")
public class FileUploadController {

    @RequestMapping(method = RequestMethod.POST)
    public @ResponseBody String create(FileUploadBean uploadItem, BindingResult result){

        ExtJSFormResult extjsFormResult = new ExtJSFormResult();

        if (result.hasErrors()){
            for(ObjectError error : result.getAllErrors()){
                System.err.println("Error: " + error.getCode() +  " - " + error.getDefaultMessage());
            }

            //set <a target="_blank" title="extjs" href="http://sencha.com/">extjs</a> return - error
            extjsFormResult.setSuccess(false);

            return extjsFormResult.toString();
        }

        // Some type of file processing...
        System.err.println("-------------------------------------------");
        System.err.println("Test upload: " + uploadItem.getFile().getOriginalFilename());
        System.err.println("-------------------------------------------");

        //set <a target="_blank" title="extjs" href="http://sencha.com/">extjs</a> return - sucsess
        extjsFormResult.setSuccess(true);

        return extjsFormResult.toString();

}

Ext JS Form ответ запроса.

Люди спрашивают меня, как возвратить что-нибудь форме, для отображения сообщения пользователю. Мы применим POJO с success свойством. Это свойство, все что нужно ExtJS для возврата.

package com.loiane.model;

public class ExtJSFormResult {

    private boolean success;

    public boolean isSuccess() {
        return success;
    }
    public void setSuccess(boolean success) {
        this.success = success;
    }

    public String toString(){
        return "{success:"+this.success+"}";
    }
}

Spring Config

Не забываем добавить multipart file настройки в Spring конфиге:

<!-- Configure the multipart resolver -->
<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>

NullPointerException

Я так же получаю вопросы про NullPointerException. Убедитесь что имя fileupload field совпадает с именем CommonsMultipartFile свойства в FileUploadBean классе:
ExtJS:

{
    xtype: 'filefield',
    name: 'file', //это имя
    fieldLabel: 'File',
    labelWidth: 50,
    msgTarget: 'side',
    allowBlank: false,
    anchor: '100%',
    buttonText: 'Select a File...'
}

Java:

public class FileUploadBean {

    private CommonsMultipartFile file; //с этим именем
}

Эти свойства ВСЕГДА должны совпадать!

Вы так же можете использовать Spring MVC 2.5 и ExtJS 4 с выше изложеным кодом.

Скачать исходные коды:

Github: https://github.com/loiane/extjs4-file-upload-spring

Google Code (zip file): http://code.google.com/p/extjs4-file-upload-spring/

Удачного кодинга!

Перевод статьи

Рассказать друзьям:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • Яндекс.Закладки
  • В Живую Ленту Google
  • Сто закладок
Комментарии (2) - Пример ExtJS 4 File Upload + Spring MVC 3 (перевод)

Ответ

  1. Многие из нас пробуют себя в смелой профессии – профессии программиста. Программисты бывают разные- опытные и не очень. Все мы совершенствуемся день ото дня. Но проверить свои знания на практике порой достаточно сложно. Данный сервис онлайн тестов поможет вам проверить свои знания, понять в какой области вам следует подтянуть свои знания, а может где-то вы настоящий профи? На сайте представлено несколько тестов, тесты регулярно пополняются. Присутствует рейтинг конкурсантов. Будь умнее других-займи первую строчку!

    Thumb up Thumb down +2

  2. Алексей:

    Хорошая статья, просто написано! Вот тут вот еще есть перевод документации по Ext JS 4 на русский: http://phpshnik.ru/ext-js-4/rukovodstvo

    Thumb up Thumb down 0

Ответить

Comments

Перед отправкой формы: