精华内容
下载资源
问答
  • C++ 文件拖拽
    2020-01-20 17:48:37

    实现文件拖拽主要使用下面三个函数:

    VOID DragAcceptFiles(HWND hWnd,BOOL fAccept);
    UINT DragQueryFile(HDROP hDrop,UINT iFile,LPTSTR lpszFile,UINT cch);
    VOID DragFinish(HDROP hDrop);
    
    //处理消息 HDROP(wParam)
    WM_DROPFILES  
    

    所以实现步骤:

    1. 窗口初始化完毕之后,允许拖拽
    void CMainWnd::InitWindow()
    {
    	__super::InitWindow();
    	DragAcceptFiles(GetHWND(), TRUE);
    }
    

    2.处理WM_DROPFILES 消息

    if (uMsg == WM_DROPFILES)
    {
    	HDROP hDropInfo = HDROP(wParam);
    	UINT uFileNum = ::DragQueryFile(hDropInfo, 0xffffffff, NULL, 0);
    	TCHAR strFileName[MAX_PATH] = _T("");
    	for (int i = 0; i < uFileNum; i++)
    	{
    		::DragQueryFile(hDropInfo, i, strFileName, MAX_PATH);	
    	}
    	::DragFinish(hDropInfo);
    	return TRUE;
    }
    
    更多相关内容
  • 通过 Qt Designer 设计的界面,填写相应内容,将文件拖入程序界面中图片位置,就可将文件进行重命名,同时可选择是否勾选备注,来确定是否将备注加入文件名。
  • MFC实现文件拖拽功能.rar.rar
  • ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
  • 在用户拖拽文件到...其中,与拖拽文件相关的事件有dragenter(文件拖拽进)、dragover(文件拖拽在悬浮)、dragleave(文件拖拽离开)、drop(文件拖拽放下)。 拖拽事件可以绑定到指定的DOM元素上,可以绑定到整个页面中
  • 主要介绍了JS实现的文件拖拽上传功能,涉及javascript事件触发、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
  • 本文实例为大家分享了javascript实现文件拖拽事件的具体代码,供大家参考,具体内容如下 1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>...
  • 主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
  • 最全的windows文件拖拽

    2015-12-04 20:14:23
    最全的windows文件拖拽,包括拖拽时吸附不同的图标,不同的反馈,使用不同的方法
  • vue 文件拖拽上传

    千次阅读 2020-12-30 11:08:06
    文件拖拽至此,或</span> ; cursor: pointer">点此上传</label> </div> </div> </div> <div class="footer"> ;"> ; cursor: pointer">选择文件</label> 提交</button> </div> </div> </template> <script> export ...

    在这里插入图片描述

    <template>
      <div id="app">
        <div class="content">
          <div class="drag-area" @dragover="fileDragover" @drop="fileDrop">
            <div v-if="fileName" class="file-name">{{ fileName }}</div>
            <div v-else class="uploader-tips">
              <span>将文件拖拽至此,或</span>
              <label for="fileInput" style="color: #11A8FF; cursor: pointer">点此上传</label>
            </div>
          </div>
        </div>
     
        <div class="footer">
          <input type="file" id="fileInput" @change="chooseUploadFile" style="display: none;">
          <label for="fileInput" v-if="fileName" style="color: #11A8FF; cursor: pointer">选择文件</label>
     
          <button @click="uploadOk">提交</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          fileName: '',
          batchFile: '',
          MAX_FILE_SIZE: 10 * 1000 * 1000
        }
      },
      methods: {
        // 点击上传
        chooseUploadFile (e) {
          const file = e.target.files.item(0)
    
          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }
    
          this.batchFile = file
          this.fileName = file.name
    
          // 清空,防止上传后再上传没有反应
          e.target.value = ''
        },
        // 拖拽上传
        fileDragover (e) {
          e.preventDefault()
        },
        fileDrop (e) {
          e.preventDefault()
          const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
          console.log(file)
          console.log('拖拽释放鼠标时')
    
          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }
    
          this.batchFile = file
          this.fileName = file.name
        },
        // 提交
        uploadOk () {
          if (this.batchFile === '') {
            return alert('请选择要上传的文件')
          }
    
          let data = new FormData()
          data.append('upfile', this.batchFile)
    
          // ajax
        }
      }
    
    }
    </script>
    
    <style lang="less" scoped>
        * {
          font-size: 14px;
        }
        .drag-area {
          height: 200px;
          width: 300px;
          border: dashed 1px gray;
          margin-bottom: 10px;
          color: #777;
        }
        .uploader-tips {
          text-align: center;
          height: 200px;
          line-height: 200px;
        }
        .file-name {
          text-align: center;
          height: 200px;
          line-height: 200px;
        }
    </style>
    
    展开全文
  • 文件直接拖拽到list控件 显示其文件名字与后缀名......
  • MFC实现文件拖拽功能

    热门讨论 2013-04-06 03:01:40
    MFC类库提供的CListCtrl类是不可以拖拽文件的,本代码子类化CListCtrl类,实现文件拖拽功能,供大家参考参考,希望小小代码能够帮到大家解决问题。
  • android文件拖拽实现

    2017-12-13 16:29:05
    一个实现文件拖拽功能的可行性实现方案,本人开发的文件管理器就是基于此方案解决pc版长按文件夹实现文件的拖拽,原理都是一样
  • 摘要:VB源码,文件操作,文件拖拽,拖放打开文件 VB实现的子类化文件拖拽打开实例源码,能实现List Text控件的文件拖放打开功能,也支持多文件同时拖放打开的功能。用拖拽的方式把需要打开的文件图标,拖放到本窗口中...
  • 文件拖拽上传

    2022-03-16 10:25:45
    文件拖拽上传

    文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器。
    结合上一篇文章(样式不一样的)添加拖拽上传。
    文章传送门:excel校验上传文章
    本来用的layui的上传,但是因为需要加校验等功能发现项目版本不支持重载,所以自己新写了一个,但是样式没有改变哦。
    效果:
    在这里插入图片描述

    html

    我们在页面中放置一个拖拽区域#importView,即接收拖拽的区域,#preview用来预览拖拽上传的图片信息。

      <form id="msgForm" method="post" enctype="multipart/form-data" class="layui-form">
          <div class="layui-upload-drag" id="importView">
               <i class="layui-icon"></i>
               <p>点击上传或拖拽上传</p>
               <input type="file" name="file" onchange="getfilename(this);" class="form-control input-sm replyField"/>
               <!-- 文件通过校验后,服务器会返回文件名,赋给returnFileName,可以不用再二次上传文件 -->
               <input type="hidden" id="returnFileName" name="returnFileName" >
           </div>
           <!-- 预览区域 -->
           <div class="layui-upload-list">
             <p id="demoText"></p>
           </div>
       </form>
       <div class=" top ">
           <button type="button" id="checkBtn" class="layui-btn  layui-btn-sm">开始校验</button>
           <button type="button" id="download" class="layui-btn layui-btn-normal layui-btn-sm none">点我下载文件查看数据</button>
           <button type="button" id="importBtn" class="layui-btn layui-btn-danger layui-btn-sm none">立即导入</button>
       </div>
    

    js

    要想实现拖拽,页面需要阻止浏览器默认行为,即四个事件(拖离、拖后放、拖进、拖来拖去),因为我们要阻止浏览器默认将图片打开的行为,这里我们使用jQuery来完成。
    1.HTML5的文件API有一个FileList接口,它可以通过e.dataTransfer.files拖拽事件传递的文件信息,获取本地文件列表信息
    var fileList = e.dataTransfer.files;
    2.使用files 方法将会获取到拖拽文件的数组形势的数据,每个文件占用一个数组的索引,如果该索引不存在文件数据,将返回 null 值。可以通过length属性获取文件数量.
    var fileNum = fileList.length;
    在本例中,我们用javascript来侦听drop事件,首先要判断拖入的文件是否符合要求,最后上传。
    上传我们用FormData模拟表单数据,直接将数据append到formdata对象中,实现了ajax上传

    let fileData={}//全局变量
    $(function(){ 
        //阻止浏览器默认行。 
        $(document).on({ 
            dragleave:function(e){    //拖离 
                e.preventDefault(); 
            }, 
            drop:function(e){  //拖后放 
                e.preventDefault(); 
            }, 
            dragenter:function(e){    //拖进 
                e.preventDefault(); 
            }, 
            dragover:function(e){    //拖来拖去 
                e.preventDefault(); 
            } 
        }); 
         var box = document.getElementById('importView'); //拖拽区域 
        box.addEventListener("drop",function(e){ 
            e.preventDefault(); //取消默认浏览器拖拽效果 
            var fileList = e.dataTransfer.files; //获取文件对象 
            //检测是否是拖拽文件到页面的操作 
            if(fileList.length == 0){ 
                return false; 
            } 
    		//检测类型
    		//图片的initImg(fileList)
    		//我们需要检测的是excel所以需要另一种
    	   let name=fileList[0].name
           let ext=name.substring(name.lastIndexOf("."),name.length);
           fileData=fileList[0];//这个是全局变量,等会有用
           console.log(fileData)
           initFileext(ext,name)
            //上传 
           //此处不选择里面上传,通过按钮一起上传,也可以立马上传,写ajax就行
           //比如
           /** xhr = new XMLHttpRequest(); 
            xhr.open("post", "upload.php", true); 
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
             
            var fd = new FormData(); 
            fd.append('mypic', fileList[0]); 
                 
            xhr.send(fd); */
        },false); 
    });
    
    

    3.检测图片类型并预览

       function initImg(fileList){
            //检测文件是不是图片 
            if(fileList[0].type.indexOf('image') === -1){
                alert("您拖的不是图片!");
                return false;
            }
    
            //拖拉图片到浏览器,可以实现预览功能 
            var img = window.URL.createObjectURL(fileList[0]);
            var filename = fileList[0].name; //图片名称 
            var filesize = Math.floor((fileList[0].size)/1024);
            if(filesize>500){
                alert("上传大小不能超过500K.");
                return false;
            }
            var str = "<img src='"+img+"'><p>图片名称:"+filename+"</p><p>大小:"+filesize+"KB</p>";
            $("#preview").html(str);
    
        }
    

    4.检测excel类型

    function initFileext(fileext,name){
      if (!(fileext=='.xls' || fileext=='.xlsx')){
             $('.replyField').val('')
             $('.import span').html('请选择要导入的文件');
             layer.msg('对不起,导入数据格式必须是xls或xlsx格式文件哦,请您调整格式后重新上传,谢谢 !', {icon: 2});
             return false
         }else{
             $('#demoText').html(name);
         }
     }
    

    点击校验事件

    校验上传的时候判断form表单的file文件是否存在,如存在就是点击上传直接进行ajax提交,如不存在就是拖拽上传需要formData进行操作set替换

     //校验
     $('#checkBtn').click(function (){
         importBuildingInfo('/upload','check')
     })
     //校验上传的时候判断form表单的file文件是否存在,如存在就是点击上传直接进行ajax提交,如不存在就是拖拽上传需要formData进行操作set替换
     function importBuildingInfo(url,type){
         layer.load(0, {shade: [0.5, '#eee']}); //上传loading
         let formData = new FormData($("#msgForm")[0]);
         //console.log(formData.has('file'))
         console.log(fileData)
         //console.log(formData.get('file'))
         if(formData.get('file').name==''&&fileData){
             formData.set('file', fileData);
         }
         console.log(formData)
         console.log(formData.get('file'))
         $.ajax({
             url:url,
             type:'POST',
             async : false,
             data:formData,
             processData:false,  // 告诉jQuery不要去处理发送的数据
             contentType: false,  // 告诉jQuery不要去设置Content-Type请求头
             dataType:"json",
             success: function(res) {
                 layer.closeAll('loading'); //关闭loading
                 fileData={};
                
             },
             error:function(err){
                 layer.msg('程序出错,请刷新后重试,或联系管理员', {icon: 2});
                 $('.loadingbox').hide()
             }
         });
     }
    

    总结

    最后总结下HTML5实现拖拽上传的技术要点:

    1、监听拖拽:监听页面元素的拖拽事件,包括:dragenter、dragover、dragleave和drop,一定要将dragover的默认事件取消掉,不然无法触发drop事件。如需拖拽页面里的元素,需要给其添加属性draggable=”true”;

    2、获取拖拽文件:在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表,.length属性获取文件数量,.type属性获取文件类型。

    3、读取数据判断类型。

    4、发送数据:使用FormData模拟表单数据AJAX提交。

    展开全文
  • 文件拖拽易语言源码系统结构:COMCallHelper_DllMain,delete,new_This,COMToThis,取整数型指针,读整数型指针,取字节集指针,取整数型整组指针,写到内存_整数型,写到内存_字节型,GetPoint_ArrayNull,取整数
  • Windows界面编程第七篇 文件拖拽(文件拖放)

    千次下载 热门讨论 2013-03-11 10:03:59
    《Windows界面编程第七篇 文件拖拽(文件拖放)》 http://blog.csdn.net/morewindows/article/details/8634451 配套程序。 使程序支持将文件拖入窗口的功能。Win32或MFC均能使用。
  • 今天在使用joomla开发表单页面的时候,有一个拖拽文件上传。于是在这里总结了一下。 一、如何实现拖拽上传 这里需要使用到浏览器拖拽事件,拖拽事件有很多,这里我们只需要使用drop这个事件。 drop:鼠标在拖放...

    前言

    今天在使用joomla开发表单页面的时候,有一个拖拽文件上传。于是在这里总结了一下。


    一、如何实现拖拽上传

    这里需要使用到浏览器拖拽事件,拖拽事件有很多,这里我们只需要使用drop这个事件。

    drop:鼠标在拖放目标上释放时,在拖放目标上触发,此时监听器需要收集数据并执行所需操作,如果是从操作系统拖放文件到浏览器,需要取消浏览器的默认行为。

    二、使用步骤

    拖拽区域html代码

          <div id="drop_area">
            <div>将您的产品附件拖拽到此处</div>
            <input class="upload" type="file" name="name" multiple="multiple"/>
            <div>请将文件控制在 100MB 以内</div>
          </div>
    
      
    document.addEventListener("drop",function(e){  //拖离   
        e.preventDefault();      
    })  
    document.addEventListener("dragleave",function(e){  //拖后放   
        e.preventDefault();      
    })  
    document.addEventListener("dragenter",function(e){  //拖进  
        e.preventDefault();      
    })  
    document.addEventListener("dragover",function(e){  //拖来拖去    
        e.preventDefault();      
    })  
    box.addEventListener("drop",function(e){
        var fileList = Array.from(e.dataTransfer.files);
        fileList.forEach((item) => {
          if(Math.round(item.size / 1024 /1024) > 100){
            alert("文件内容超过100M,请重新上传");
            return;
          }
      },false)
    

    这里fileList里面的就是你上传的文件,你只需要对数据进行简单分装,通过ajax发送给后台。

    总结

    在这里我有一个疑问,就是通过这种drop获取到的只有文件的名字大小以及格式,但是并没有路径。没有路径那么这个文件要怎么存储在后台呢?大家可以给我评论

    展开全文
  • vue项目实现文件拖拽上传

    千次阅读 2020-06-01 15:06:16
    } </style> 二,监听拖动事件 让vue支持文件拖拽,写在vue的mounted(){}里面,将文件拖动到区域(这里的区域就是id=“drop-area”),监听区域拖动事件 说明: 1、文件第一次进入拖动区时,触发 dragenter 事件 2、...
  • html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来。功能实现下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现。 首先会介绍一些必须...
  • 今天把项目中的文件拖拽上传模块分离出来,做了一个独立的小demo,并把相关代码打包上传到了我的github中,为了其他学习者和开发者提供拙见。 gitHub地址:https://github.com/codeplay2015/dragToUpload 由于代码中...
  • C#之winform实现文件拖拽功能 将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop、DragEnter...
  • win7文件拖动补丁

    2011-09-26 09:40:23
    如果想分享几个文件给别人,通常我们会先把要分享的文件拖拽到一边,选中全部之后再统一发送,可是到了Windows 7炒作系统后不行了,无论你怎么拽,文件丝毫不动。 为了解决这个问题,国外网友通过修改注册表实现了...
  • 主要为大家详细介绍了js实现本地图片文件拖拽效果,拖拽文件到指定位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VC6.0要实现在对话框拖动不是很方便,先参考网络资料,实现文件拖动示例。 实现步骤详见压缩包中文档。附赠有相关代码制作的的文本文件分割合并工具。
  • 文件拖拽到窗口

    千次阅读 2017-11-21 08:36:13
    文件拖拽到窗口方法一:重写部件拖拽处理函数 设置UI接受拖拽: 重写: .h #include #include #include #include <QMimeData>protected: void dragEnterEvent(QDragEnterEvent * event); void dropEvent(QDr
  • 现在打开优酷的网站我们再观看视频时如果拖动滚动条,页面会自动出现一个小的播放窗口,而这个播放窗口是可以说随便拖拽的。这种对图片或者链接的拖拽效果是怎么实现的?其实用HTML5就很容易实现了,因为HTM...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 273,048
精华内容 109,219
关键字:

文件拖拽