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;
    });



    })

  • 相关阅读:
    MYSQL利用merge存储引擎来实现分表
    IoC原理及实现
    prometheus + grafana安装部署(centos6.8)
    PHP Laravel定时任务Schedule
    排序算法杂谈(三) —— 归并排序的非递归实现
    排序算法杂谈(二) —— 冒泡排序的递归实现
    排序算法杂谈(一) —— 量化数组的有序程度
    排序算法(七) —— 快速排序
    排序算法(六) —— 归并排序
    排序算法(五) —— 堆排序
  • 原文地址:https://www.cnblogs.com/zjpzjp/p/7295558.html
Copyright © 2011-2022 走看看