码迷,mamicode.com
首页 > 编程语言 > 详细

springMVC上传图片,使用jquery预览

时间:2016-09-16 14:13:01      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

首先在html加入代码:其中div用于显示上传后的图片预览

<form id="form" enctype="multipart/form-data">
        upload image:
        <input type="file" id="image_input" name="file" />
        <a href="#" onclick="upload()">upload</a>
    </form>
    <div id="imgDiv"></div>

js代码如下:需要先引入jquery.form.js插件<script type="text/javascript" src="js/jquery-form.js"></script>使用ajaxSubmit

function upload() {
        var imagePath = $("#image_input").val();
        if (imagePath == "") {
            alert("please upload image file");
            return false;
        }
        var strExtension = imagePath.substr(imagePath.lastIndexOf(‘.‘) + 1);
        if (strExtension != ‘jpg‘ && strExtension != ‘gif‘
                && strExtension != ‘png‘ && strExtension != ‘bmp‘) {
            alert("please upload file that is a image");
            return false;
        }
        $("#form").ajaxSubmit({
            type : ‘POST‘,
            url : ‘upload/image.do‘,
            success : function(data) {
                alert("上传成功");
                $("#imgDiv").empty();
                $("#imgDiv").html(‘<img src="‘+data+‘"/>‘);
                $("#imgDiv").show();
            },
            error : function() {
                alert("上传失败,请检查网络后重试");
            }
        });

    }

 

服务器端代码:

package com.shop.controller;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
@RequestMapping("/upload/")
public class ImageUploadController {
    /**
     * upload image and return the image url
     * 
     * @return
     * @throws IOException
     * @throws IllegalStateException
     */
    @RequestMapping("image")
    @ResponseBody
    public String uploadImage(HttpServletRequest request,
            HttpServletResponse response, HttpSession session,
            @RequestParam(value = "file", required = true) MultipartFile file)
            throws IllegalStateException, IOException {
        String path = session.getServletContext().getRealPath("/upload");
        System.out.println("real path: " + path);
        String fileName = file.getOriginalFilename();
        System.out.println("file name: " + fileName);
        File targetFile = new File(path, fileName);
        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        file.transferTo(targetFile);
        String fileUrl = request.getContextPath() + "/upload/" + fileName;
        return fileUrl;
    }
}

 

springMVC上传图片,使用jquery预览

标签:

原文地址:http://www.cnblogs.com/ljdblog/p/5876256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!