图片上传—商城（四）

最新推荐文章于 2022-12-30 15:42:21 发布

weixin_45236451

最新推荐文章于 2022-12-30 15:42:21 发布

阅读量324

点赞数

分类专栏：商城文章标签： java

本文链接：https://blog.csdn.net/weixin_45236451/article/details/107633267

版权

商城专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片上传有两种方式，一种是存储在本地电脑上，一种是上传到服务器上
1、文件存储在本地：
1.两个jar包依赖

  <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>

```csharp

2.文件上传的jsp页面注意form标签中的 entype属性需设置为multipart/form-data

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="/pic/upload" method="post" enctype="multipart/form-data">
    <INPUT TYPE="file" name="uploadFile"/>
<br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

3.Controller控制件

@Controller
@RequestMapping("/pic")
public class OldPictureController {
    @RequestMapping("/upload") //pic/upload为路径
    public String fileupload(HttpServletRequest request, MultipartFile uploadFile) throws Exception {
        Map resultMap = new HashMap<>(); //uploadFile要和上面的name对应
        try {

            //先获取要上传的目录文件
            String path = request.getSession().getServletContext().getRealPath("/upload");
            //创建File对象，向该路径下上传文件
            File file = new File(path);
            if (!file.exists()) {
                file.mkdirs();
            }
            //获取到上传文件的名称
            String filename = uploadFile.getOriginalFilename();
            String uuid = UUID.randomUUID().toString().replaceAll("-", "").toUpperCase();
            //把文件名唯一化
            filename = uuid + "_" + filename;
            //上传文件
            uploadFile.transferTo(new File(file, filename));
            resultMap.put("error", 0);
            resultMap.put("url", path + "/" + filename);
            String json = JsonUtils.objectToJson(resultMap);
            return json;
        } catch (Exception e) {
            resultMap.put("error", 1);
            resultMap.put("message", "上传发生异常");
            String json = JsonUtils.objectToJson(resultMap);
            return json;
        }

    }
}

3. 配置文件解析器（springmvc）
这里bean的id必须为multipartResolver ，bean里还可以添加一些参数如设置上传文件的大小的最大值

<!--配置文件解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--        配置上传文件的大小-->
        <property name="maxUploadSize" value="10000000"/>
    </bean>

2、上传到服务器：
上传到数据库看这里
从上传和文件下载：看这里
上传到虚拟机（略）：alt+p:打开SecureCRT的SFTP上传文件，put F:/nginx-1.8.0.tar.gz

富文本编辑器的使用
第一步：在jsp中引入KindEditor的css和js代码

1 <link href="kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
2 <script src="jquery-1.10.1.min.js"></script>
3 <script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
4 <script type="text/javascript" charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源

1 <form action="editor.html" method="post">
2     <textarea style="width:800px;height:300px;visibility:hidden;" name="desc" id="editor"></textarea>
3     <input type="submit"/>
4 </form>

第三步：初始化富文本编辑器。使用官方提供的方法初始化

<script type="text/javascript" >
    var kingEditorParams ={
        filePostName  : "file",//指定上传文件参数名称
        uploadJson:'upload2.html',//指定上传文件请求的url。
        dir:"image"//上传类型，分别为image、flash、media、file
    }
    var editor;
    $(function () {
        editor=KindEditor.create($("#editor"),kingEditorParams);
    })
</script>

第四步：js提交请求的时候，同步富文本框到textarea

1 editor.sync();//同步富文本编辑器到textarea
调用sync同步

第五步：上传图片时controller方法

1 @ResponseBody
2 String json = "{\"error\":0,\"url\":\"" + url + "\"}";

weixin_45236451

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录