异步跨域上传从剪贴板上传图片

首先跨域的需求是必须的，由程序架构所决定。

关于跨域那最先想到的还是jq的ajax的jsonp,可是jsonp只能使用get的方式，图片数据太大有可能就不稳定。最终决定使用formdata封装file对象，使用XMLHttpRequest对象发送请求数据。

为了模拟跨域，分别在本地的两个服务器localhost:80和localhost:8090部署后端和前端的代码

前端代码：

<script>

        //第一步，从剪贴板获取file对象
        document.addEventListener('paste', function(event) {
        var items = (event.clipboardData && event.clipboardData.items) || [];
        var file = null;
    
        if (items && items.length) {
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
            }
        }
        if(!file){
            return;
        }

        //第二步，实现预览,利用FileReader对象实现将file对象转化为base64位字符串
        var reader = new FileReader();
        reader.onload = function(e){
        // 通过e.target.result取到base64然后上传
        // 作为src设到image标签上预览
        var img=document.createElement('img');
        img.src=e.target.result;
        img.width=110;
        img.height=100;
        document.getElementById("box").appendChild(img);
        }
        reader.readAsDataURL(file); //此处的file为上面得到的文件对象

        //第三步，实现上传，
        //【1】使用XMLHttpRequest对象post跨域异步上传文件，
        //【2】使用formdata对象封装file对象数据
        var formdata = new FormData();
        formdata.append('file', file);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://192.168.1.115/uploadfile/file.php", true);
        xhr.onload=function(){
            var json=JSON.parse(xhr.responseText);
            if(json.state==1){
                alert('上传成功');
            }

        }
        xhr.send(formdata);
            
});

 </script>

html:用以预览图片容器

<div id="box">
   

</div>

php：后端

<?php
		header("Access-Control-Allow-Origin:*");//接收跨域请求设置
		if($_FILES['file']['size']) 
		{
                    $date=date('Ymd');
                    $path="./upload/".$date.'/';
					if(!is_dir($path)){
						 mkdir($path,0777,true);
					}
					$name=	 $path.uniqid().'.png';
					if(copy($_FILES['file']['tmp_name'], "$name"))
						{		
                            $arr['state']=1;
                            $arr['url']=$name;
						}else{
                            $arr['state']=222;
                           
						}
			
			
		}else{

            $arr['state']=111;
		}
    
        echo json_encode($arr);
        exit;
?>

知识点详述：

【1】跨域

1. 跨域，指的是从一个域名去请求另外一个域名的资源。即跨域名请求。
2. 跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。
3. 跨域的严格一点来说就是只要协议，域名，端口有任何一个的不同，就被当作是跨域。

【2】同源策略

1. 同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略
2. 所谓同源是指，域名，协议，端口相同。
3. 当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

【3】[HTML5] FileReader对象

使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取，下面是一个读取本地txt文件内容的例子：

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        //读取本地文件，以gbk编码方式输出
        var reader = new FileReader();
        reader.readAsText(file,"gbk");
        reader.onload = function(){
            //读取完毕后输出结果
            console.log(this.result);
        }
    }
}

读取读片文件为base64位字符串

        var reader = new FileReader();
        reader.onload = function(e){
        // 通过e.target.result取到base64然后上传
        // 作为src设到image标签上预览
        var img=document.createElement('img');
        img.src=e.target.result;
        img.width=110;
        img.height=100;
        document.getElementById("box").appendChild(img);
        }
        reader.readAsDataURL(file); //此处的file为上面得到的文件对象

【3】FormData对象

1. FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据
2. 利用一些键值对来模拟一系列表单控件：即将form中的所有表单元素的name和value组装成一个queryString；
3. 异步上传二进制文件。与普通Ajax相比，使用FormData的最大优点：可以异步上传二进制文件。

Formdata对象创建

1.你可以自己创建一个FormData对象，然后调用它的append()方法来添加字段

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

2.通过HTML表单创建FormData对象

想要构造一个包含Form表单数据的FormData对象，需要在创建FormData对象时指定表单的元素。

var formData = new FormData(someFormElement);

3.你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前，附加额外的数据到FormData对象里

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);