pdf文件上传工具js

最新推荐文章于 2024-07-21 03:02:07 发布

qq654188050

最新推荐文章于 2024-07-21 03:02:07 发布

阅读量2k

点赞数 1

文章标签： pdf上传 java文件接收

本文链接：https://blog.csdn.net/qq654188050/article/details/81027132

版权

本文介绍了在不依赖jQuery的项目中，如何使用Zepto等轻量级框架实现PDF文件的上传。通过XMLHttpRequest和FileReader进行文件的base64编码，使用FormData封装数据，并提供前端JS代码示例。同时，文章分享了使用SpringBoot后端接收文件时遇到的问题及解决办法，包括MultipartFile类型的转换、配置问题以及文件存储位置的调整。

摘要由CSDN通过智能技术生成

原因

现在主流的上传工具大多需要依赖jQuery来使用，虽然功能强大，扩展性好

但是有时候吧，项目中可能不需要那么强大的功能及扩展性，仅仅只需要简单的上传一个文件就可以了

对于用zepto等非jQuery框架的项目来说，很多的上传组件用不了，于是我就自己写了一个简易的文件上传脚本

代码

首先说下方法参数，file是需要上传的文件所在的input标签，type=file肯定是需要的

再说下原理，我是直接利用XMLHttpRequest来发送请求的，文件由FileReader进行base64编码，数据由FormData封装

最后上代码，代码中会有注释

function uploadFile(file){
	var files = file.files;
	var len = files.length; //多文件上传时会用到
	var reader = new FileReader();  //读取文件用的
	reader.onload = function(evt) {  //这个onload方法相当于是readAsDataURL方法执行后的回调，异步的，毕竟文件编码也是要时间的
	    // 添加参数
	    var formData = new FormData();  //formData的用法网上有说明
	    formData.append('file', files[0],files[0].name);  这里的第三个参数是用来指定文件的名字，我这里用的是文件本身的名字
            formData.append('size', files[0].size);
            formData.append('base64