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

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

jquery上传图片并回显

2021-03-06 00:59   6584 浏览

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

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

页面是用的是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

喜欢 0

上一篇： Echarts漏斗图形的，怎么保障当数据是0的时候，漏斗图形一直存在。

下一篇： Jquery实现图片放大两种方式

工作小总结&小工具类 Redis LoRaWAN&ChirpStack AI编程 AI相关 MQTT Maven mybatis ChatGPT uniapp zookeeper Thymeleaf语法 POI-TL sa-token PowerDesigner16.5 taos数据库 frp echarts Actor模型及Akka thingsboard 大疆无人机对接 CI/CD 教师资格证 小任务 面试其他 职场 淘宝客 支付宝支付 HBuilder X Flink Java集合类 多线程 ES Ribbon eureka Docker java游戏 网络通信 Nacos 芋道管理系统 Solr 分布式相关 Dubbo 数据结构 EasyPOI Drools RocketMQ JS 七天深入MySQL实战营 书籍 kafka spring Java基础 java web 若依(ruoyi) 分布式事务 面试宝典 mysql java8新特性 spring cloud ElasticSearch学习系列 HM_leadnews 即时通讯 并发 思维&学习 VUE 宝塔面板 算法刷题 设计模式 RabbitMQ学习系列教程 P3C规范 JVM学习系列 反射 自定义注解 网络美文 PHP源码 经验分享 资源 git项目 websocket 网赚 数据库读写分离 测试相关 其他随笔 shiro学习系列 fremarker学习系列 学习笔录-spring boot 网络文章 工作小总结

评论

凯哥Java
Powered By 凯哥Java Copyright © 2012 - 2022 京ICP备16010673号