• 剪切板和上传文件内容获取


    1.获取剪切板内容

    场景:在粘贴时将粘贴内容按换行粘贴到不同输入框,类似粘贴注册码之类的多个输入框一次粘贴功能。

    主要技术:input元素onpaste方法,入参是event,也可以直接获取event,内容在event.clipboardData中,items属性可以看具体内容对象,使用getData("text")方法可以获取到内容,参数还可以是Text,text/plain等。

    扩展:富文本,contenteditable=true;document.createRange(),window.getSelection(),selection.removeAllRangs(),range.selectNodeContents(元素),selection.addRange(range)。另外还有一个最主要是,document.execCommand('copy')、粘贴、加粗等等,是富文本的关键功能。

    2.获取上传文件内容

    上传文件内容首先是通过input的onchange方法获取,里边有files对象列表,但是这里只能看到文件大小、格式等信息,要看文件内容,则要借助FileReader对象(需要注意兼容性),使用FileReader实例化对象的readAsText方法来读取文件内容,参数是前边的files单个对象,读取后可使用onload接收,内容在result中

     1 <input type="file" onchange="upload(this)" />  
     2 
     3 function upload(input) {  //支持chrome IE10  
     4     if (window.FileReader) {  
     5         var file = input.files[0];  
     6         filename = file.name.split(".")[0];  
     7         var reader = new FileReader();  
     8         reader.onload = function() {  
     9             console.log(this.result)  
    10             alert(this.result);  
    11         }  
    12         reader.readAsText(file);  
    13     }   
    14     //支持IE 7 8 9 10  
    15     else if (typeof window.ActiveXObject != 'undefined'){  
    16         var xmlDoc;   
    17         xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
    18         xmlDoc.async = false;   
    19         xmlDoc.load(input.value);   
    20         alert(xmlDoc.xml);   
    21     }   
    22     //支持FF  
    23     else if (document.implementation && document.implementation.createDocument) {   
    24         var xmlDoc;   
    25         xmlDoc = document.implementation.createDocument("", "", null);   
    26         xmlDoc.async = false;   
    27         xmlDoc.load(input.value);   
    28         alert(xmlDoc.xml);  
    29     } else {   
    30         alert('error');   
    31     }   
    32 }  
     

    的readAsText方法来读取文件内容,参数是前边的files单个对象,读取后可使用onload接收,内容在result中

    FIGHTING
  • 相关阅读:
    poj2623
    poj2635
    案例解析丨 Spark Hive 自定义函数应用
    云图说 | 华为云GPU共享型AI容器,让你用得起,用得好,用的放心
    云小课 |选定合适的证书,做“有证”的合规域名
    记一次 node 项目重构改进
    SpringBoot写后端接口,看这一篇就够了!
    如何让知识图谱告诉你“故障根因”
    我敢说,这个版本的斗地主你肯定没玩过?
    5 分钟带你掌握 Makefile 分析
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/15210594.html
Copyright © 2020-2023  润新知