记录jq图片拖拽、截图Ctrl+V粘贴上传图片到php后台

核心事件

1. ondrop事件：可拖动元素或选取的文本放置在目标区域时触发

html
div中添加ondrop事件  
ondrop="dragUpload('img_` + le + `','drag_` + le + `',this, event) 

js
/** 拖拽上传 */  img_id drag_id  为自定义对应元素id值
function dragUpload(img_id,drag_id,that, event) {
   var e = event || window.event;
   e.preventDefault();
   e.stopPropagation();
   const files = e.dataTransfer.files;
   upload(img_id,drag_id,files);
}

     2. ondragover 事件：在可拖动元素或选取的文本正在拖动到放置目标时触发

html
div中添加ondragover事件
ondragover="drag(this, event);"

js
/** 防止拖拽图片时打开图片 */
function drag(that, event) {
    var e = event || window.event;
    e.preventDefault()
    e.stopPropagation()
}

    3. ondragenter 事件：在拖动的元素或选择的文本进入到有效的放置目标时触发

html
div中添加ondragenter事件  
ondragenter="drag(this, event);"

js
/** 防止拖拽图片时打开图片 */
function drag(that, event) {
   var e = event || window.event;
   e.preventDefault()
   e.stopPropagation()
}

upload上传

    1. 注意 ajax提交时的参数设置

contentType: false, //必须  禁止jQuery设置Content-Type请求头
processData: false, //必须  禁止jQuery处理发送的数据

由于这两个参数我没注意看，结果php一直获取不到 $_FILES 在这浪费了好多时间，引以为戒！ 

    2.上传upload函数

js
/** 图片上传 */
function upload(img_id,drag_id,files) {
   const IMG_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
   if (Array.prototype.some.call(files, function(file) {return !IMG_TYPES.includes(file.type)})){
       layer.msg("仅支持png,gif,jpg,jpeg图片格式！")
       return;
   }
   if((files[0].size/1024/1024) > 200){
       layer.msg(`单图片最大200MB！`)
       return;
   }
   if (files.length > 1) {
       layer.msg(`最多只能上传1张图片！`)
       return;
   }
   var file = files[0];
   var formData = new FormData();
   formData.append("file", file);

   $.ajax({
       type: 'POST',
       url: 'php后台upload地址',
       data: formData,
       contentType: false, //必须  禁止jQuery设置Content-Type请求头
       processData: false, //必须  禁止jQuery处理发送的数据
       dataType: "json",
       success: function (msg) {
           if(msg.status == 1){
               //后续DOM操作
           }
       }
   })
}

这样就基本上完成了！小垃圾的日常 

追加截图  Ctrl+V粘贴上传图片

   1. onmouseenter 事件：在鼠标指针移动到元素上时触发

   2.onmouseleave 事件：在鼠标移出元素时触发

   3.onpaste 事件：在用户向元素中粘贴文本时触发

html
onmouseleave="handleMouseLeave(this)" 
onmouseenter="handleMouseEnter(this)" 
onpaste="pasteUpload('img_` + le + `','drag_` + le + `',this, event)"

js
function handleMouseEnter(that) {
   $(that).focus();
}
function handleMouseLeave(that) {
   $(that).blur();
}

function pasteUpload(img_id,drag_id,that, event) {
   var e = event || window.event;
   e.preventDefault()
   e.stopPropagation()
   var files = e.clipboardData.files;//获取剪贴板的图片信息
   upload(img_id,drag_id,files);
}