如何简单实现视频预览和图片预览

工作需要做一个视频预览和图片预览,于是就发现了一个简单省事的预览方法,供大家参考一下,请多指教啊

    var videoExts = [".avi", ".mp4", ".wma", ".rmvb", ".rm", ".flash", ".3gp", ".flv", ".wmv"];
    var imgExts = [".bmp", ".jpeg", ".jpg", ".gif", ".png"];    
$("#preview").click(function () {
        var file = $("#ResUrl").val();//获取我那件路径
        if (file == null || file == "") {
            layer.msg("请先选择文件");
            return;
        }
        var ext = file.substring(file.lastIndexOf('.')).toLowerCase();//获取文件后缀

        var html = "";
        var title = "";
        if (imgExts.indexOf(ext) > 0) {
            title = "图片预览";
            html = "<img src='" + file + "' styl
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Spring Boot 和 Vue 前后端分离架构中,实现文件预览可以通过前端发送请求获取文件的 URL,然后在前端使用相关插件或组件进行文件预览。 下面是一种可能的实现方式: 1. 后端实现: - 在 Spring Boot 中配置静态资源路径,将存储文件的文件夹路径设置为静态资源路径。例如,可以在 `application.properties` 文件中添加以下配置: ``` spring.resources.static-locations=file:/path/to/files/ ``` - 后端提供一个接口,用于返回文件的URL。可以在控制器中编写如下代码: ```java @RestController public class FileController { @Value("${spring.resources.static-locations}") private String staticResourcePath; @GetMapping("/api/file/{fileName}") public ResponseEntity<Resource> getFile(@PathVariable String fileName) throws IOException { Path filePath = Paths.get(staticResourcePath + fileName); Resource resource = new UrlResource(filePath.toUri()); if (resource.exists() && resource.isReadable()) { return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileName + "\"") .body(resource); } else { // 文件不存在或无法读取 return ResponseEntity.notFound().build(); } } } ``` 2. 前端实现: - 在 Vue 组件中,使用 axios 或其他网络请求库发送 GET 请求,获取文件的 URL。例如: ```javascript import axios from 'axios'; // 在组件中调用接口获取文件 URL axios.get('/api/file/fileName.pdf') .then(response => { const fileUrl = response.data; // 使用文件预览插件或组件进行预览 // 例如,可以使用 pdf.js 进行 PDF 文件预览 // 或者使用 <img> 标签显示图片、使用 <video> 标签播放视频等 }) .catch(error => { console.error(error); }); ``` 需要注意的是,上述代码只是一种简单实现方式,具体的预览方式和插件选择取决于你要预览的文件类型。你可以根据实际需求选择合适的插件或组件来实现文件预览功能,例如 pdf.js、viewer.js 等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值