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

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中