1. 程式人生 > >springMVC圖片上傳的處理方式

springMVC圖片上傳的處理方式

com add turn subst cor input gif格式 abs value

首先需要依賴的jar包:

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

頁面:

<a href="javascript:;" class="a-upload">
  <input class="" type="file" name="file" id="file" required="required">上傳
</a>

大家如果覺得默認的上傳文件的按鈕不好看,可以引入下面的css樣式:

.a-upload {
    padding: 4px 10px;
    height: 27px;
    line-height
: 27px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; } .a-upload input { position: absolute; width: 100%; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor
: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }

前端腳本:

$(‘#file‘).on(‘change‘, function () {
    var $this = $(this);
    var formData = new FormData();
    formData.append(‘file‘, $(‘#file‘)[0].files[0]);
    var fileName = $(‘#file‘)[0].files[0].name;
    var fileType = fileName.substring(fileName.lastIndexOf(‘.‘) + 1);
    var fileSize = $(‘#file‘)[0].files[0].size;
    if (fileType != ‘jpg‘ && fileType != ‘png‘ && fileType != ‘gif‘) {
        alert("請上傳.jpg、.png、.gif格式的圖片!");
        return;
    }
    if (fileSize > 300 * 1024) {
        alert("請上傳大小小於300KB的圖片!");
        return;
    }
    $.ajax({
        url: ‘/admin/upload‘,
        type: ‘POST‘,
        data: formData,
        cache: false,
        processData: false,
        contentType: false
    }).done(function (result) {
        if (result != ‘‘) {
            $this.closest(‘div‘).append(‘<div class="img-preview"><img src="‘ + result + ‘"/></div>‘);
        } else {
            alert("請上傳.jpg、.png、.gif格式的圖片!");
        }
    }).fail(function () {
        alert("圖片上傳失敗!");
    });
});

後端接收:

   @RequestMapping(value = "admin/upload", method = RequestMethod.POST)
    @ResponseBody
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        try {
            String filename = file.getOriginalFilename();
            if (filename.endsWith("jpg") || filename.endsWith("png") || filename.endsWith("gif")) {
                String prefix = filename.substring(filename.lastIndexOf("."));
                String imgName = UUID.randomUUID().toString() + prefix;
                String imgUri = writeToFileSystem(imgName, file.getBytes());
                return imgUri;
            }
        } catch (Exception e) {
            LOG.error("uploadFile failed:", e);
        }
        return null;
    }

springMVC圖片上傳的處理方式