zoukankan      html  css  js  c++  java
  • 拖拽文件至浏览器实现图片上传功能

    实现拖拽文件至浏览器实现图片上传功能。

    直接上代码

     var outer = document.creatElement("div");

    outer.addListener('dragleave', function (evt) {

    evt.stopPropagation();
    evt.preventDefault();
    });

    outer.addListener('dragover', mxUtils.bind(this, function (evt) {
        evt.stopPropagation();
    evt.preventDefault();
    }));

    outer.addListener('drop', mxUtils.bind(this, function (evt) 
        if (evt.dataTransfer.files.length > 0) {
        // 获取文件
    var file = evt.dataTransfer.files[0];

        // 构造文件读取
    var reader = new FileReader();
    var formdata = new FormData();
    formdata.append("projectId", urlParams["projectId"]);
    formdata.append("imgPathFile", file);
    formdata.append("name", file.name);
         // 读取文件
    reader.readAsDataURL(file);
        
    imgArr.push(formdata);
    reader.onload = function(evt) {
    // 加载图片
    }
    }
    evt.stopPropagation();
    evt.preventDefault();
    }), false);
  • 相关阅读:
    《图解CSS3》笔记5 媒体与Responsive设计
    理论篇 前端MVC、MVP、MVVM思考1
    AngularJS篇 $resource使用笔记
    《图解CSS3》笔记4 animation动画
    Prim
    邻接矩阵与邻接表
    差分约束
    SPFA
    floyd
    Kosaraju
  • 原文地址:https://www.cnblogs.com/bigharbour/p/14491161.html
Copyright © 2011-2022 走看看