js实现剪切板效果复制黏贴图片

使用js来实现类似word剪切板的效果，即复制黏贴图片，而js也正好提供了这种可能，那就是textarea的事件驱动，监视textarea的黏贴事件，一旦出现黏贴就将获得的图片上传到服务器，在从服务器中拿出显示到页面上，获得图片数据的方法也可以用js中提供的clipboard的方式获取，下面是个例子，

通过clipboard获取后打上断点，查看剪贴板上的数据可以发现在items下的数据为kind为file，type为“image/png”



那么方法就确定了，当KInd为file且type中包含image字样就将该数据上传，上传方法采用ajax即可，写在事件中，通过getasfile函数获得图片数据，并写入到表单中，通过ajax上传即可，具体过程如下：

document.getElementsByTagName("textarea")[0].addEventListener('paste', function(e) {

    var clipboard = e.clipboardData;

    for(var i=0,len=clipboard.items.length; i<len; i++) {

        if(clipboard.items[i].kind == 'file' || clipboard.items[i].type.indexOf('image') > -1) {

            var imageFile = clipboard.items[i].getAsFile();

            var form = new FormData;

            form.append('avatar', imageFile);

            //var callback = G.uploadpicCallback || function(type, data){};

            $.ajax({

                url: "uploadimage.php",

                type: "POST",

                data: form,

                processData: false,

                contentType: false,

                beforeSend: function() {

                    $('#uploadmessage').html('正在上传图片...');

                },

                error: function() {

                    $('#uploadmessage').html('上传失败请重新上传!');

                    alert('图片上传失败');

                },

                success: function(url) {

                    $('#uploadmessage').html('图片上传成功');
           setTimeout('$(\'#uploadmessage\').html(\'\')', 1000);

                    var img=new Image();
       img.src=url;
       document.getElementById('uploadmessage').appendChild(img);
       //textarea.val(textarea.val() + '[]('+url+')')*/

                }

            })

            e.preventDefault();

        }

uploadimage.php，最简单的上传函数，如果要实现更复杂的文字图片一起上传的话，js文件和php上传操作都需要对应的修改

if(!is_dir("./images"))

  {

    mkdir("./images");

  }

if($_FILES['avatar']['tmp_name']){

$img=$_FILES['avatar']['tmp_name'];

preg_match("/\w*\./",$img,$img_name);

$path="images/".$img_name[0]."png";

if(move_uploaded_file($img,$path)){
    $result=true;
echo $path;
   

}else{
   $result=false;
// echo $path;

}

}