jquery上传图片并回显

  • 作者: 凯哥Java(公众号:凯哥Java)
  • JS
  • 时间:2021-03-06 00:59
  • 4953人已阅读
简介 在工作中,有时候我们会遇到这样的情况:上传图片并回显。先来看看代码怎么写。然后咱们在讨论,这个案例中使用到的技术。页面是用的是thymeleaf开发的。说明:页面中必须引入query上传的div:      

🔔🔔好消息!好消息!🔔🔔

 如果您需要注册ChatGPT,想要升级ChatGPT4。凯哥可以代注册ChatGPT账号代升级ChatGPT4

有需要的朋友👉:微信号 kaigejava2022

在工作中,有时候我们会遇到这样的情况:上传图片并回显。

先来看看代码怎么写。然后咱们在讨论,这个案例中使用到的技术。

页面是用的是thymeleaf开发的。

说明:页面中必须引入query

上传的div:

<div class="form-group">
      <label class="col-sm-3 control-label">图片:</label>
    <div class="col-sm-8" >
        <input type="hidden" name="name"  id="productImgValue" th:field="*{productImg}">
        <img   height='65' width='55' id="showImgId" th:src="@{${orderTemp.productImg}}" style="display:none">
        <input type="file" name="photo" id="photo" value="" placeholder="上传商品图片">
        <input type="button" onclick="postData(0);" value="上传" name="" style="width:100px;height:30px;">
    </div>
  </div>

点击上传按钮的js:

/**
 * 如果图片不为空的话,就显示图片
 * */
$(document).ready(function () {
    var productImgValue = $("#productImgValue").val();
    if(null != productImgValue && '' != productImgValue){
        $("#showImgId").show();
    }
});


function postData(type){
    var formData = new FormData();
    formData.append("file",$("#photo")[0].files[0]);
    $.ajax({
        url:'/order/temp/upload/productImg', /*接口域名地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            console.log(res);
            var code = res.code;
            if(0== code ){
                $("#productImgValue").val(res.url);
                //回显图片
                $("#showImgId").attr('src',res.url);
                if(type ==0 ){
                    //显示
                    $("#showImgId").show();

                }
            }else {
                alert(res.msg);
            }
        }
    })
}

看看后台怎么写的:

    @PostMapping("/upload/productImg")
    @ResponseBody
    public AjaxResult productImg(@RequestParam(value="file",required=false) MultipartFile file) throws Exception
    {
        try
        {
            String fileName = FileUploadUtils.uploadWithPath(poiExcelImgFilePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("fileName", fileName);
            ajax.put("url", url);
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }
}

工具类FileUploadUtils:

package com.ruoyi.common.utils.file;

import java.io.File;
import java.io.IOException;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;
import com.ruoyi.common.config.Global;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.exception.file.FileNameLengthLimitExceededException;
import com.ruoyi.common.exception.file.FileSizeLimitExceededException;
import com.ruoyi.common.exception.file.InvalidExtensionException;
import com.ruoyi.common.utils.DateUtils;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.common.utils.uuid.IdUtils;

/**
 * 文件上传工具类
 * 
 * @author ruoyi
 */
public class FileUploadUtils
{
    /**
     * 默认大小 50M
     */
    public static final long DEFAULT_MAX_SIZE = 50 * 1024 * 1024;

    /**
     * 默认的文件名最大长度 100
     */
    public static final int DEFAULT_FILE_NAME_LENGTH = 100;

    /**
     * 默认上传的地址
     */
    private static String defaultBaseDir = Global.getProfile();

    public static void setDefaultBaseDir(String defaultBaseDir)
    {
        FileUploadUtils.defaultBaseDir = defaultBaseDir;
    }

    public static String getDefaultBaseDir()
    {
        return defaultBaseDir;
    }

    /**
     * 以默认配置进行文件上传
     *
     * @param file 上传的文件
     * @return 文件名称
     * @throws Exception
     */
    public static final String upload(MultipartFile file) throws IOException
    {
        try
        {
            return upload(getDefaultBaseDir(), file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION,true);
        }
        catch (Exception e)
        {
            throw new IOException(e.getMessage(), e);
        }
    }

    /**
     * 根据文件路径上传
     *
     * @param baseDir 相对应用的基目录
     * @param file 上传的文件
     * @return 文件名称
     * @throws IOException
     */
    public static final String upload(String baseDir, MultipartFile file) throws IOException
    {
        try
        {
            return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION,true);
        }
        catch (Exception e)
        {
            throw new IOException(e.getMessage(), e);
        }
    }

    /**
     * 文件上传
     *
     * @param baseDir 相对应用的基目录
     * @param file 上传的文件
     * @param allowedExtension 上传文件类型
     * @param addDateFlag 是否在文件路径中追加日期。true:是。false:不追加
     * @return 返回上传成功的文件名
     * @throws FileSizeLimitExceededException 如果超出最大大小
     * @throws FileNameLengthLimitExceededException 文件名太长
     * @throws IOException 比如读写文件出错时
     * @throws InvalidExtensionException 文件校验异常
     */
    public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension,boolean addDateFlag)
            throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
            InvalidExtensionException
    {
        int fileNamelength = file.getOriginalFilename().length();
        if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
        {
            throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
        }

        assertAllowed(file, allowedExtension);

        String fileName = extractFilename(file,addDateFlag);

        File desc = getAbsoluteFile(baseDir, fileName);
        file.transferTo(desc);
        String pathFileName = getPathFileName(baseDir, fileName);
        return pathFileName;
    }

    /**
     * 编码文件名
     * @param file
     * @param addDateFlag       文件名是否追加年月日。 true:是 false:否
     *                          当是的时候。文件名就是:2021/03/04/uuid.extension
     * @return
     */
    public static final String extractFilename(MultipartFile file,boolean addDateFlag)
    {
        String fileName = file.getOriginalFilename();
        String extension = getExtension(file);
        if(addDateFlag){
            fileName = DateUtils.datePath() + "/" + IdUtils.fastUUID() + "." + extension;
        }else{
            fileName =  IdUtils.fastUUID() + "." + extension;
        }

        return fileName;
    }

    private static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException
    {
        File desc = new File(uploadDir + File.separator + fileName);

        if (!desc.getParentFile().exists())
        {
            desc.getParentFile().mkdirs();
        }
        if (!desc.exists())
        {
            desc.createNewFile();
        }
        return desc;
    }

    private static final String getPathFileName(String uploadDir, String fileName) throws IOException
    {
        int dirLastIndex = Global.getProfile().length() + 1;
        String currentDir = StringUtils.substring(uploadDir, dirLastIndex);
        String pathFileName = Constants.RESOURCE_PREFIX + "/" + currentDir + "/" + fileName;
        return pathFileName;
    }

    /**
     * 文件大小校验
     *
     * @param file 上传的文件
     * @return
     * @throws FileSizeLimitExceededException 如果超出最大大小
     * @throws InvalidExtensionException
     */
    public static final void assertAllowed(MultipartFile file, String[] allowedExtension)
            throws FileSizeLimitExceededException, InvalidExtensionException
    {
        long size = file.getSize();
        if (DEFAULT_MAX_SIZE != -1 && size > DEFAULT_MAX_SIZE)
        {
            throw new FileSizeLimitExceededException(DEFAULT_MAX_SIZE / 1024 / 1024);
        }

        String fileName = file.getOriginalFilename();
        String extension = getExtension(file);
        if (allowedExtension != null && !isAllowedExtension(extension, allowedExtension))
        {
            if (allowedExtension == MimeTypeUtils.IMAGE_EXTENSION)
            {
                throw new InvalidExtensionException.InvalidImageExtensionException(allowedExtension, extension,
                        fileName);
            }
            else if (allowedExtension == MimeTypeUtils.FLASH_EXTENSION)
            {
                throw new InvalidExtensionException.InvalidFlashExtensionException(allowedExtension, extension,
                        fileName);
            }
            else if (allowedExtension == MimeTypeUtils.MEDIA_EXTENSION)
            {
                throw new InvalidExtensionException.InvalidMediaExtensionException(allowedExtension, extension,
                        fileName);
            }
            else if (allowedExtension == MimeTypeUtils.VIDEO_EXTENSION)
            {
                throw new InvalidExtensionException.InvalidVideoExtensionException(allowedExtension, extension,
                        fileName);
            }
            else
            {
                throw new InvalidExtensionException(allowedExtension, extension, fileName);
            }
        }

    }

    /**
     * 判断MIME类型是否是允许的MIME类型
     *
     * @param extension
     * @param allowedExtension
     * @return
     */
    public static final boolean isAllowedExtension(String extension, String[] allowedExtension)
    {
        for (String str : allowedExtension)
        {
            if (str.equalsIgnoreCase(extension))
            {
                return true;
            }
        }
        return false;
    }

    /**
     * 获取文件名的后缀
     * 
     * @param file 表单文件
     * @return 后缀名
     */
    public static final String getExtension(MultipartFile file)
    {
        String extension = FilenameUtils.getExtension(file.getOriginalFilename());
        if (StringUtils.isEmpty(extension))
        {
            extension = MimeTypeUtils.getExtension(file.getContentType());
        }
        return extension;
    }

    /*************** 以下代码是上传到指定位置的   不用生成年月日的*****/
    /**
     * 上传到指定目录中。
     * 如excel中的img保存路径:D:/ruoyi/uploadPath/pic/imgs
     * @param imgFilePath
     * @param file
     * @return
     */
    public static String uploadWithPath(String imgFilePath, MultipartFile file) throws IOException{
        try
        {
            return upload(imgFilePath, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION,false);
        }
        catch (Exception e)
        {
            throw new IOException(e.getMessage(), e);
        }
    }
}

在来说说这个小案例中使用到的知识点:

一:虚拟了一个formData作为ajax参数提交

var formData = new FormData();
formData.append("file",$("#photo")[0].files[0]);

这个很重要,以后有需要也可以这么来。

二:使用到了jQuery的赋值方法

2.1:给input标签的value赋值

$("#productImgValue").val(res.url);

2.2:给img标签的src赋值

$("#showImgId").attr('src',res.url);

三:通过jQuery控制元素显示与隐藏

3.1:显示

$("#showImgId").show();

3.2:隐藏

$("#container").hide();

四:jQuery上传

98cd366c9a847946514b4b6868e1debf.png

ab507d83cf6850a67d8b170d1782af4d.png

TopTop