zoukankan      html  css  js  c++  java
  • 拖拽 上传文件

    $('#qrCode').click(function(e){

    $('#myFile').click();

    e.stopPropagation();
    $('#qrCode').unbind("click"); //移除click
    return false;
    });
    var container = document.getElementById('qrCode');
    var enterpriseaccountInfoModel = document.getElementById('enterpriseaccountInfoModel');
    //拖动事件的目标对象——document
    document.ondragover = function(event){
    event.preventDefault(); //让drop事件可被触发
    }

    document.ondrop = function(event){

    event.preventDefault(); //阻止图片在新窗口中打开
    }
    enterpriseaccountInfoModel.ondragover = function(event){
    event.preventDefault(); //让drop事件可被触发
    }

    enterpriseaccountInfoModel.ondrop = function(event){

    event.preventDefault(); //阻止图片在新窗口中打开
    }

    //拖动事件的目标对象——div#container
    container.ondragover = function(event){
    $('#qrCode>p').css('display','none');
    $('#qrCode>img').css('display','none');
    event.preventDefault(); //让drop事件可被触发
    }
    container.ondragleave = function(event){
    $('#qrCode>p').css('display','block');
    event.preventDefault(); //让drop事件可被触发
    }
    container.ondrop = function(event){
    $('#qrCode>p').css('display','none');

    var filelist = event.dataTransfer.files; //File

    if(filelist.length>=2){

    alert('你一次只能选择一张图片');
    return ;
    }

    for(var i=0;i<filelist.length;i++){
    var file = filelist[i];
    fileLoad(file);

    }
    return ;

    }
    function fileLoad(file){
    //console.log(file);
    if(file.type!="image/png"){

    alert('您上传的文件包含不合法文件,请重新上传');
    $('#qrCode>p').css('display','block');
    return ;
    }
    $('#qrCode>p').css('display','none');
    $('#qrCode>img').remove();
    var reader = new FileReader();//文件读取器

    reader.readAsDataURL( file );
    reader.onload = function(){ //读取完成事件

    //把DataURL声明为一个img元素的src
    var img = document.createElement('img');
    img.style.width='100%';
    img.src = reader.result;
    container.appendChild(img);
    $('#reUpload').css('display','inline-block');
    // $('#Upload').css('display','block');
    }
    }
    var oBtn = document.getElementById('myFile');
    $(oBtn).change(function(e) {//通过鼠标点击文件时,不是通过拖拽
    var self=this;
    var filelist = self.files; //File

    if(filelist.length>=2){
    alert('你一次只能选择一张图片');
    return ;
    }
    if(filelist.length==0){

    return ;
    }
    for(var i=0;i<filelist.length;i++){
    var file = filelist[i];
    fileLoad(file);

    }

    e.stopPropagation();
    $(this).unbind("change"); //移除click
    return false;

    });
    $('#reUpload').click(function(e){//重新上传
    $('#myFile').click();

    e.stopPropagation();
    // $(this).unbind("click"); //移除click
    return false;
    });



    })

  • 相关阅读:
    规则引挚NxBRE文档纪要在流引挚与推论引挚取舍
    去除特殊字符
    C文件操作
    计算球面上两点弧长
    已知圆心和两点画圆弧(算法)(计算机图形)(C#)
    摄像机矩阵变换
    DX之“HelloWord”
    绘制箭头
    绘制二维图片
    绘制三角形
  • 原文地址:https://www.cnblogs.com/zjpzjp/p/7295558.html
Copyright © 2011-2022 走看看