代码改变世界

js 获取上传文件的字节数及内容

  日拱一卒,功不唐捐  阅读(1892)  评论(0)  编辑  收藏  举报
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta charset="UTF-8">
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script src="jquery.min.js"></script>
      <script>

        function check() {
            
            var objFile = document.getElementById("fileId");
            if(objFile.value == "") {
                alert("不能空")
            }
        
            console.log(objFile.files[0].size); // 文件字节数
            
            var files = $('#fileId').prop('files');//获取到文件列表
            if(files.length == 0){
                alert('请选择文件');
            }else{
                var reader = new FileReader();//新建一个FileReader
                reader.readAsText(files[0], "UTF-8");//读取文件 
                reader.onload = function(evt){ //读取完文件之后会回来这里
                    var fileString = evt.target.result; // 读取文件内容
                    alert(fileString);
            }
        }
        
    }
    </script>
 </head>

 <body>
    <div>
        上传文件 ： <input type="file" name = "file" id = "fileId" /> 
        
        <button  type = "submit" name = "btn" value = "提交" id = "btnId" onclick="check()" /> 提交
    </div>
 </body>
</html>
复制代码

 

编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手