文件上载功能

最新推荐文章于 2022-03-29 13:30:00 发布

王zming

最新推荐文章于 2022-03-29 13:30:00 发布

阅读量164

点赞数

分类专栏： Java常用配置文章标签： java

本文链接：https://blog.csdn.net/weixin_45933638/article/details/112055827

版权

Java常用配置专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文件上载标准模板
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载</title>
    <form method="post"  enctype="multipart/form-data" action="/upload/file">
        <div>
            <label>上载文件：
            <input type="file" name="imageFile">
            </label>
        </div>
<input type="submit" value="提交">

    </form>
</head>
<body>

</body>
</html>

@PostMapping("/upload/file")
    public R uploadFile(MultipartFile imageFile) throws IOException {
        //存储位置
        String path = "D:/upload";
        //创建文件夹
        File forder = new File(path);
        forder.mkdirs();
        //展示演示文件名
        String filename= imageFile.getOriginalFilename();
        //创建文件
        File file = new File(forder,filename);
        //把文件写入新创建的文件
        imageFile.transferTo(file);
        return R.ok("成功保存文件");
    }

ajax方式进行提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载</title>
    <script src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<form id="demoForm" method="post"  enctype="multipart/form-data" action="/upload/file">
    <div>
        <label>上载文件：
            <input id="imageFile" type="file" name="imageFile">
        </label>
    </div>
    <input type="submit" value="提交">
</form>
<script   src="js/utils.js"></script>
<script>
    $(function () {
        //绑定表单提交事件
        $("#demoForm").submit(function(){
            //找到文件控件
            let files = document.getElementById("imageFile").files;

            if (files.length>0){
                let file = files[0]
                console.log(file);
                upLoadImage(file);
            }else {
                alert("请选择文件");
            }
            return false;
        });
        function upLoadImage(file){
            //创建上载表单数据对象
            let form = new FormData();
            form.append("imageFile",file);
            $.ajax({
                url:"/upload/file",
                method:"POST",
                data:form,
                contentType:false,
                processData:false,
                success:function(r){
                    if (r.code===OK){
                        console.log(r.message);
                        alert(r.message)
                    }else{
                        alert(r.message)
                    }
                }
            })
        }
    })
</script>
</body>
</html>

上传图片

在这里插入图片描述

summermote上传

在这里插入图片描述

<form method="post" v-on:submit.prevent="createQuestion">
                <div class="form-group">
                    <label for="title">标题:</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="请填写标题3~50字符"
                           pattern="^.{3,50}$" required v-model="title">
                </div>
                <div class="form-group">
                    <label>请至少选择一个标签：</label>
                    <v-select multiple required v-bind:options="tags" v-model="selectedTags"
                              placeholer="选择问题相关标签"></v-select>
                </div>
                <div class="form-group">
                    <label>请选择老师：</label>
                    <v-select multiple required v-bind:options="teachers" v-model="selectedTeachers"
                              placeholder="请选择解答老师"></v-select>
                </div>
                <div class="form-group">
                    <!--富文本编辑器 start-->
                    <label for="summernote">问题正文</label>
                    <textarea name="content" id="summernote"></textarea>
                    <!--富文本编辑器 end-->
                </div>
                <button type="submit" class="btn btn-primary mt-3">提交问题</button>
            </form>

$(document).ready(function () {
    $('#summernote').summernote({
        height: 300,
        tabsize: 2,
        lang: 'zh-CN',
        placeholder: '请输入问题的详细描述...',
        //回调方法在选择图片之后自定调用onImageUpload方法
        callbacks: {
            onImageUpload: function (files) {
                let file = files[0];//找到选定的图片
                console.log(file);
                let form = new FormData();
                form.append("imageFile", file);
                $.ajax({
                    url: "/upload/image",
                    method: "POST",
                    data: form,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (r) {
                        if (r.code === OK) {
                            //上传成功后进行加载创建img标签
                            var img = new Image();
                            img.src = r.message;
                            //将图片添加到summernote
                            $("#summernote").summernote("insertNode", img);
                        } else {
                            alert(r.message);
                        }

                    }
                });

            }
        }
    });

});

王zming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件上载功能

文件上载标准模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文件上载</title> <form method="post" enctype="multipart/form-data" action="/upload/file"> <div> &l
复制链接

扫一扫

专栏目录