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

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中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章