上传图片html-HTML 实现上传图像

bendan520 html

2023-08-21 0 9,398 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

HTML功能通过各种标签实现，用于实现图片上传的标签是

标签。

img 标签属性：

1. 来源：路径

2. Widht：图像长度（px，代表像素;比率，表示父容器的百分比）。

3.高度：图像高度（长度和高度通常只设置为一个，另一个等列缩放）。

路径书写形式：

1. 绝对路径：

1.1 绝对 C 盘路径（笔记本上存储图片的路径）：如 F：DesktopDesktop JobsjavalearningjavawebHTML learningimgxinlang title .png

1.2 绝对网络路径（保证有网页，并且是联网的），在原网页中打开需要的图片，复制网页路径：

2. 相对路径，相对于当前文件夹的路径（推荐）：

./：表示当前目录，可以省略

.. /：表示上一个目录，不能省略

如果当前文件夹是 Java，则有一个文件夹 1

而当前编辑的HTML文件，文件夹1下有一张图片1上传图片html，要上传图片1上传图片html，路径为：文件夹1/1.png

有兴趣的人可以将以下代码复制到 html 文件中，然后双击以查看我使用的路径。

肖展美图

src=“https://syimg.3dmgame.com/uploadimg/upload/image/20200525/20200525104237_27394.jpg”>

每晚进步一点，少担心一点，再见~。

前言：图片文件上传经常被尝试，对于我们来说html 上传图片，我们想看看明天图片上传是怎么写的

SpringBoot 配置静态文件访问

如果不设置此静态访问地址，则上传的文件将不会

访问html 上传图片，但是如果不使用流上传图片，则只能写入绝对地址，如果使用流上传文件，则可以将其设置为当前项目，这样上传时会上传到当前项目目录

package com.tms.tblog.infrastructure.config;
import org.springframework.boot.system.ApplicationHome;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import java.io.File;
@Configurationpublic class WebMVCConfig implements WebMvcConfigurer {    //对静态资源的配置    @Override    public void addResourceHandlers(ResourceHandlerRegistry registry) {        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/", "classpath:/test", "file:" + "upload");
        ApplicationHome h = new ApplicationHome(getClass());        File jarF = h.getSource();        String dirPath = jarF.getParentFile().toString() + "/upload/";        registry.addResourceHandler("/upload/**").addResourceLocations("file:" + dirPath);    }}

二。编译代码以上传文件

1. 编译一个套接字控制器，控制器用于接收上传的文件

package com.tms.tblog.controller;
import com.tms.tblog.dto.ResultDto;import com.tms.tblog.infrastructure.untils.FileUtil;import io.swagger.annotations.Api;import lombok.extern.log4j.Log4j2;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;
import java.io.File;import java.util.UUID;
@Api(tags = "上传")@RestController@Log4j2@RequestMapping("/tblog/upload")public class UploadController {    //头像上传    @PostMapping("/upload")    public ResultDto uploadAvatar(@RequestParam("files") MultipartFile file) {        if (file.isEmpty()) {            return new ResultDto("1", "请选择文件", null);        }
        //保存地址        String pathName = "upload/img/";        File filePath = new File(pathName);        // 判断目录是否存在，如果不存在,创建文件目录        if (!filePath.exists() && !filePath.isDirectory()) {            System.out.println("目录不存在，创建目录:" + filePath);            filePath.mkdirs();        }
        //获取文件名（包括后缀）        String uploadName = file.getOriginalFilename();        // 取得文件名后缀        String suffix = uploadName.substring(uploadName.lastIndexOf(".") + 1);        // 获取文件名去掉后缀        String fileName = uploadName.substring(0, uploadName.lastIndexOf("."));        // 定义一个uuid用来保存图片的名字，也可以根据自己的需求来定义保存文件的名字        UUID uuid = UUID.randomUUID();        // 全文件路径名        String pathFullName = pathName + fileName + "_" + uuid.toString() + "." + suffix;
        return FileUtil.saveFile(file, pathFullName);    }}

2. 编译文件实用程序类，并使用常用方式编译文件相关操作 FileUtil

package com.tms.tblog.infrastructure.untils;
import com.tms.tblog.dto.ResultDto;import org.springframework.web.multipart.MultipartFile;
import java.io.FileOutputStream;import java.io.IOException;import java.util.HashMap;import java.util.Map;
public class FileUtil {
    /**     * 保存文件（文件流）     *     * @param file         文件     * @param pathFullName 保存路径     * @return     */    public static ResultDto saveFile(MultipartFile file, String pathFullName) {        FileOutputStream fos = null;        try {            fos = new FileOutputStream(pathFullName);            fos.write(file.getBytes()); // 写入文件            Map map = new HashMap();            map.put("url", pathFullName);            return new ResultDto("0", "上传成功", map);
        } catch (Exception e) {            e.printStackTrace();            return new ResultDto("0", "上传失败", null);        } finally {            try {                fos.close();            } catch (IOException e) {                e.printStackTrace();                return new ResultDto("0", "上传失败", null);            }        }    }}

三。编制测试台以证明功效

1. 编译后端代码并使用简单的 layui 样式

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    <title>登录界面</title>    <link rel="stylesheet" href="/lib/layui/css/layui.css">    <script src="/lib/layui/layui.js"></script>    <script src="/lib/jquery/dist/jquery.min.js"></script></head><body><h1>登录界面</h1><div class="layui-input-block">    <form action="" class="layui-form" enctype="multipart/form-data" method="post">        <input type="hidden" name="blogImg" id="imgPath" value="">        <div class="form-group"><label>图片上传</label>            <input type='file' style='margin:5px;' name='files' required><br>            <button type="button" class="layui-btn" id="img_upload">上传图片</button>        </div>        <input type="submit">    </form></div>
<script>    // 提交菜单    layui.use(['upload', 'layer', 'form'], function () {        var form = layui.form;        var upload = layui.upload;        //普通图片上传        $('#img_upload').click(function () {            var formData = new FormData();//获取选择的文件            $.each($('input[name="files"]'), function (index, item) {                formData.append("files", item.files[0])            });//发送异步请求            $.ajax({                method: 'post',                url: '/tblog/upload/upload',//文件上传接口                data: formData,                processData: false,                contentType: false,                success: function (data) {//成功返回触发的方法                    $('#imgPath').val(data);                    alert("上传成功");                },//请求失败触发的方法                error: function () {                    alert("上传失败");                }            });        });    });</script></body></html>