获取清空textarea的文字内容_在两台电脑之间快速传文字和文件

最新推荐文章于 2023-01-11 15:58:10 发布

weixin_39548968

最新推荐文章于 2023-01-11 15:58:10 发布

阅读量95

点赞数

文章标签：获取清空textarea的文字内容

本文链接：https://blog.csdn.net/weixin_39548968/article/details/111681806

版权

工具体验

网址: http://tools.lixiang.red/tools/sync/textPage

制作思路

这个是从teamview中想到的.用TeamView远程的时候来定位两台电脑,所以我这里也用了id-value的形式.

文字使用HashMap来存储,内容在获取之后就会删掉,没有持久化

文件使用HashMap来存储,然后文件在获取之后就会被删掉,没有做持久化.

工具源码

前端

技术点:

thymeleaf
ajax

前端html的代码:

<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>    <meta charset="UTF-8">    <title>同步工具title>    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js">script>    <link href="/css/bootstrap.min.css" th:href="@{https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css}" rel="stylesheet">head><body class="container">id: <input th:id="currentId" th:value=" ${id}" />value: <input th:id="currentPassword" th:value=" ${password}" /><div class="row">    <div class="col-7">        <input onclick="syncText(0)" type="button" th:value="获取">        <input onclick="syncText(1)" type="button" th:value="上传">        <div>            <textarea th:id="currentContent" th:rows="30" style="width: 100%">textarea>        div>    div>    <div class="col-3">        同步文件: 只能10M以下        <input th:id="file_input" type="file">        <input type="button" onclick="syncFile(1)" value="上传">        <input type="button" onclick="syncFile(0)" value="下载">    div>div><div>    <div>微信扫一扫,更多技术好文:div>    <img src="/img/java_subscribe.jpg">div><script type="text/javascript">    function syncText(opt) {        var id  = $("#currentId").val();        var  password = $("#currentPassword").val();        var content = $("#currentContent").val();        var request={content:content,id:id,password:password}        if(opt ===1){            $.ajax({                url:'/tools/sync/text',                type:'post',                contentType:'application/json',                data:JSON.stringify(request),                success:function (data) {                }            })        }        if(opt===0){            $.ajax({                url:'/tools/sync/text',                type:'post',                contentType:'application/json',                data:JSON.stringify({id:id,password:password}),                success:function (data) {                    $('#currentContent').val(data);                }            })        }        }    function syncFile(opt) {        var id  = $("#currentId").val();        var password = $("#currentPassword").val();        var formD = new FormData();        formD.append("file",$("#file_input")[0].files[0]);            if(opt === 1){            $.ajax({                url:'/tools/sync/file?id='+id+'&password='+password,                type:'post',                contentType:false,                processData: false,                data:formD,                success:function (data) {                    alert(data)                }            })        }        if(opt ===0){            window.location.href = "/tools/sync/getFile?id="+id+"&password="+password;        }    }script>body>html>

后端

技术点:

webflux的使用
Path,Files的使用

后端java代码:

@Controllerpublic class SyncContentController {        // 存放文字的    private Map<String, String> cache = new HashMap<>();    // 存放文件的    private Map<String, String> fileCache = new HashMap<>();    @RequestMapping("tools/sync/text")    @ResponseBody    public String syncText(@RequestBody SyncContentRequest request) {        String key = request.getId() + "-" + request.getPassword();        String result = "";        if (StringUtils.isBlank(request.getContent())) {            result = cache.get(key);            cache.remove(key);        } else {            cache.put(key, request.getContent());        }        return result;    }        @RequestMapping("tools/sync/textPage")    public String syncTextPage(Model model) {          // 返回页面的时候,同时生成默认的id 和 value        String currentId = RandomTools.getComCharStr(6);        String password = RandomTools.getComCharStr(6);        model.addAttribute("id", currentId);        model.addAttribute("password", password);            return "test";    }        @RequestMapping("tools/sync/file")    @ResponseBody    public String syncFile(@RequestPart(value = "file") FilePart file, @RequestParam("id") String id,@RequestParam("password") String password) {        try {          // 上传文件,因为使用的是webflux ,  所以不太一样            String key = id + password;            String filePath = key + "/" + file.filename();            Files.createDirectories(Paths.get(key));            Path tempFile = Files.createFile(Paths.get(filePath));            file.transferTo(tempFile.toFile());            fileCache.put(key, filePath);            return "OK";        } catch (Exception e) {            e.printStackTrace();        }        return "fail";    }        @RequestMapping("tools/sync/getFile")    public ResponseEntity getFile(String id, String password) throws IOException {          // 获取文件的, 使用的是webflux        String key = id + password;        String filePath = fileCache.get(key);        String suffix = FileTools.getSuffixName(filePath);        byte[] bytes = Files.readAllBytes(Paths.get(filePath));        // 读取完就删除文件        Files.deleteIfExists(Paths.get(filePath));        Files.deleteIfExists(Paths.get(key));        ByteArrayInputStream inputStream = new ByteArrayInputStream(bytes);        String s = URLEncoder.encode("公众号-白天想懂夜的黑", "UtF-8");        return ResponseEntity.ok()                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename="+s+"." + suffix)                .body(new InputStreamResource(inputStream));    }

weixin_39548968

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取清空textarea的文字内容_在两台电脑之间快速传文字和文件

工具体验网址: http://tools.lixiang.red/tools/sync/textPage制作思路这个是从teamview中想到的.用TeamView远程的时候来定位两台电脑,所以我这里也用了id-value的形式.文字使用HashMap来存储,内容在获取之后就会删掉,没有持久化文件使用HashMap来存储,然后文件在获取之后就会被删掉,没有做持久化.工具源码前端技术点:t...
复制链接

扫一扫