客户端图片拖拽读取

HTML

<div id="holder">
          <input type="text" placeholder="拖拽图片到此"  >
</div>

JS

// 定义全局变量，表示上传的对象；预览和上传的桥梁
    var fileItems = [];
    var holder = document.getElementById('holder'),
        progress = document.getElementById('uploadprogress');
// 可添加拖拽效果，如下
    holder.ondragover = function () {
        this.className = 'hover';
        return false;
    }
    holder.ondragend = function () {
        this.className = '';
        return false;
    }
    holder.ondrop = function (e,cb) {
        this.className = '';

        // 1、阻止浏览器的默认事件
        e.preventDefault();
        // 2、获取图片
        var files = e.dataTransfer.files;
        fileItems = files;
        console.log(files)
        // 3、做自定义的时，比如上传
        cb(files)
    }

done

如果觉得文章对你有点用的话，麻烦拿出手机，这里有一个你我都有的小福利（每天一次）： 打开支付宝首页搜索“8601304”，即可领红包。谢谢支持