js+html实现表单上传word等文件

最新推荐文章于 2024-07-25 14:20:43 发布

杉楂

最新推荐文章于 2024-07-25 14:20:43 发布

阅读量9.7k

点赞数

分类专栏：前端开发（h5+css+js）文章标签： html javascript web前端 css

本文链接：https://blog.csdn.net/rhythm923/article/details/53678208

版权

这篇博客介绍了如何使用JavaScript配合HTML实现表单上传，特别是Word文件。首先展示了JavaScript部分的登录验证代码，并提到了sweetAlert插件的使用。然后，文章转到HTML表单的设计，利用input type='file'实现文件选择，并通过CSS美化了上传按钮的外观。

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

先是js部分。

我在其中写了登录验证部分，可以根据需求增删。（其中 swal()是调用了sweetAlert插件的方法，详见http://www.dglives.com/demo/sweetalert-master/example/）

		<script type="text/javascript">
			function fileSelected() {
				var file = document.getElementById('fileToUpload').files[0];
				if(file) {
					var fileSize = 0;
					if(file.size > 1024 * 1024)
						fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
					else
						fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
					document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
					document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
				}
			}

			function uploadFile() {
				var checklogin = $('.checklogin').text();
				if(checklogin != "NO") {
					var fd = ne