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

目录回到顶部

• 1.获取剪切板内容
• 2.获取上传文件内容

 

正文

回到顶部

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中

<input type="file" onchange="upload(this)" />  

function upload(input) {  //支持chrome IE10  
    if (window.FileReader) {  
        var file = input.files[0];  
        filename = file.name.split(".")[0];  
        var reader = new FileReader();  
        reader.onload = function() {  
            console.log(this.result)  
            alert(this.result);  
        }  
        reader.readAsText(file);  
    }   
    //支持IE 7 8 9 10  
    else if (typeof window.ActiveXObject != 'undefined'){  
        var xmlDoc;   
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
        xmlDoc.async = false;   
        xmlDoc.load(input.value);   
        alert(xmlDoc.xml);   
    }   
    //支持FF  
    else if (document.implementation && document.implementation.createDocument) {   
        var xmlDoc;   
        xmlDoc = document.implementation.createDocument("", "", null);   
        xmlDoc.async = false;   
        xmlDoc.load(input.value);   
        alert(xmlDoc.xml);  
    } else {   
        alert('error');   
    }   
}  

 

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