精华内容
下载资源
问答
  • HTML5获取文件夹路径之曲线救国
    千次阅读
    2019-04-09 08:59:56

    需求:

    1.需要在页面中,实现单击按钮,弹出选择目录对话框,选择目录后,在页面中显示路径

     

    环境:

    Chrome V42以上,此版本已经禁止了NPAPI,因此通过插件形式,无法调用NativeAPI

    注:HTML5只提供上传文件的对话框,不提供保存文件和选择目录的对话框

    解决方法:

    1.Chrome提供Native Message支持Chrome扩展和Native APP通过标准输入输出通讯

    2.Native可以是MFC\Win32\.Net程序,Windows API SHBrowseForFolder 提供了选择目录功能

    3.SHBrowseForFolder参数BROWSEINFO提供了父窗口句柄设置,窗口一旦形成父子窗口的关系,弹出的模态对话框就像是Chrome弹出的一样

    4.Native获取到选择文件的路径后,通过Native Message发送至Chrome扩展的background脚本

    5.Background将消息转发至content 脚本 

    6.content脚本通过window.postMessage将消息发送至页面脚本 或直接在Content脚本中修改DOM

    7.通过以上流程可以实现,在Chrome中选择目录

    参考链接:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

    更多相关内容
  • JS实现文件夹选择.HTML

    热门讨论 2013-07-18 11:44:39
    使用js实现文件夹选择功能,操作方便简单
  • 我们都知道input标签type="file"的时候,会打开一个文件选择器,但不支持选择目录。 如果要支持选择目录,且必须只是目录的话,用下列的代码: <input type='file' @change="triggerFile($event)" ...

    我们都知道input标签type="file"的时候,会打开一个文件选择器,但并不支持选择目录。

     

    如果要支持选择目录,且必须只是目录的话,用下列的代码:

    <input type='file' @change="triggerFile($event)" webkitdirectory>

     

    change绑定了一个函数,函数的内容为:

    triggerFile(event) {
          let file = event.target.files;
          console.log(file);
        },

    这样就可以获得文件夹的名字了,之后可以进行下一步操作。

    如果是想要上传文件,用iview等框架的upload即可,本文不再赘述。

    展开全文
  • 主要介绍了Html读取本地文件夹下图片显示的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现获取本地文件夹路径,不支持文件获取,文件上穿 选择文件夹得弹框效果 前端代码 <!DOCTYPE html> <html> <head> <head> <!-- 兼容IE --> <meta charset="UTF-8"> <...

    实现获取本地文件夹路径,不支持文件获取,文件上穿

    最终获取后效果

    选择文件夹得弹框效果

    在这里插入图片描述

    前端代码

    <!DOCTYPE html>
    <html>
    <head>
    
    <head>
        <!-- 兼容IE -->
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="../css/element-index.css">
        
        <!-- 自定义接口地址配置 -->
        <script src="../config/api.js"></script>
        <!-- import JavaScript -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/element-index.js"></script>
        <script type="text/javascript" src="../js/axios.min.js"></script>
       
    
    </head>
    
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
    
        .el-table .success-row {
            background: #f4f8f2;
        }
    
        [v-cloak] {
            display: none;
        }
        .el-scrollbar__wrap{
            margin-right: 40px !important;
        	margin-left: 20px;
        }
    </style>
    
    <body>
    <div id="app" v-cloak>
        <el-container>
            <el-header style="margin-top: 20px; height: 40px;">
                <el-form :inline="true"  size="mini" class="demo-form-inline">
                    <el-form-item label="数据">
                        <el-input clearable v-model="dfpath" placeholder="数据" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleGetPath('待测数据')" size="mini">...</el-button>
                    </el-form-item>
                     <el-form-item label="数据">
                        <el-input clearable  v-model="jfpath"  placeholder="数据" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleGetPath('检测数据') "size="mini">...</el-button>
                    </el-form-item>
                    <el-dialog title="" :append-to-body="true" :visible.sync="routeDialogVisible"  width="600px" :close-on-click-modal="false"  >
    			      <el-form >
    			        <el-form-item label="">
    			          <el-input style="width:450px; padding-left:20px" size="mini" v-model="filePath">
    			          </el-input>
    			           <el-button style="float: right; margin: 5px 40px 0 0" size="mini" @click="backRoute()" >后退</el-button>
    			        </el-form-item>
    			        <el-scrollbar style="height: 350px">
    			           <div v-for="(item, index) in fileList" v-if="index>=0" :key="index">
    	                     <el-row :gutter="30">
    	                        <el-col :span="20" style="display: flex;">
    		                        <el-input  @click.native="clickData(fileList[index])" v-model="fileList[index]" style="margin-bottom: 10px;" type="button"></el-input>
    	                        </el-col>
    	                     </el-row>
    				        </div>
    			        </el-scrollbar>
    			      </el-form>
    			      <!-- 内容底部区域 -->
    			      <span slot="footer" class="dialog-footer">
    			        <el-button @click="closeGetPath()">取消</el-button>
    			        <el-button type="primary" @click="confirmRoute()">确 定</el-button>
    			      </span>
    			   </el-dialog>
                    
                    
                </el-form>
            </el-header>
        </el-container>
    </div>
    </body>
    
    <script>
        var data = {
            //文件夹数组
            fileList: [],
            routeDialogVisible:false,
            //文件夹路径
            filePath:'请选择文件所在路径',
            //选择的类别
            type:'',
            //待测数据
            dfpath:'',
            //检测报告
            jfpath:'',
        }
        //VUE内容实现
        var vue = new Vue({
            el: '#app',
            data: data,
            //初始加载
            created() {
              
            },
            methods: {
           	   //获取路径的方法
           	    handleGetPath(data) {
           		  this.type = data;
           		  console.log(data);
           		  var _this = this;
           		  //ajax调用方法
       		      axios.post(`${api.file}/fileList/`,{
       		    	files : _this.filePath
       		      })
                  .then(function (res) {
                      if (res.data.code == 10010) {
                    	  _this.fileList = res.data.dataList;
                      } else {
                          Vue.prototype.$message({
                              type: 'error',
                              message: res.data.msg
                          });
                      }
                    })
                    .catch(function (error) {
                        Vue.prototype.$message({
                            type: 'error',
                            message: "获取路径失败"
                        });
                    });
           		  
           	      this.routeDialogVisible = true;
           	    },
           	    //关闭窗口
           	    closeGetPath() {
           	      this.fileList = {};
           	      this.filePath ='请选择文件所在路径';
           	      this.routeDialogVisible = false;
           	    },
           	    //确定按钮
           	    confirmRoute() {
           	    	var _this = this;
           	    	if(this.type == "待测数据"){
           	    		_this.dfpath = _this.filePath;
           	    	}else{
           	    		_this.jfpath = _this.filePath;
           	    	}
           	      this.fileList = {};
             	  this.filePath ='请选择文件所在路径';	
           	      this.routeDialogVisible = false;
           	    },
           	 //点击进入文件列表
           	    clickData(fileName) {
           	    	var _this = this;
           	    	if(this.filePath == '请选择文件所在路径'){
           	    		_this.filePath = fileName+"\\";
           	    	}else{
           	    		_this.filePath = this.filePath+"\\"+fileName;
           	    	}
           	   //ajax调用方法
         		      axios.post(`${api.file}/fileList/`,{
         		    	 files : _this.filePath
         		      })
                    .then(function (res) {
                        if (res.data.code == 10010) {
                      	  _this.fileList = res.data.dataList;
                        } else {
                            Vue.prototype.$message({
                                type: 'error',
                                message: res.data.msg
                            });
                        }
                      })
                      .catch(function (error) {
                          Vue.prototype.$message({
                              type: 'error',
                              message: "获取路径失败"
                          });
                      });
           	    	
           	    },
           	    //向上一级
           	    backRoute() {
           	    	       	 	var _this = this;
    	   	    	if(this.filePath == '请选择文件所在路径'){
    	   	    	  Vue.prototype.$message({
                          type: 'error',
                          message: "未选择路径"
                      });
    	   	    	}else{
    	   	    		if(_this.filePath.length <=3){
    	   	    			_this.filePath = '请选择文件所在路径';
    	   	    		}else{
    	   	    			_this.filePath = _this.filePath.substring(0,_this.filePath.lastIndexOf("\\"));	
    	   	    		}
    	   	    		
    	   	    	}
    	   	   //ajax调用方法
    	 		      axios.post(`${api.file}/fileList/`,{
    	 		    	 files : _this.filePath
    	 		      })
    	            .then(function (res) {
    	                if (res.data.code == 10010) {
    	              	  _this.fileList = res.data.dataList;
    	                } else {
    	                    Vue.prototype.$message({
    	                        type: 'error',
    	                        message: res.data.msg
    	                    });
    	                }
    	              })
    	              .catch(function (error) {
    	                  Vue.prototype.$message({
    	                      type: 'error',
    	                      message: "获取路径失败"
    	                  });
    	              });
           	    },
            }
        })
    </script>
    
    </html>
    

    这里只给出api.js 代码 其他需要的js 文件需要自己查找下载/或者下载附件获取

    附件地址

    api.js

    //本地测试统一接口  如果该地址不可用,请在本地改为  http://ip:端口/项目名/
    const host ='../';
    //引用名称
    const api = {
        'file': host + 'file',//获取文件目录
    }
    
    
    

    Java 代码

    import java.io.File;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    import javax.swing.filechooser.FileSystemView;
    
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.context.request.async.DeferredResult;
    
    import com.ccit.java.utils.ResultRtn;
    import com.ccit.java.utils.StatusCode;
    
    @RequestMapping("/file")
    @RestController
    public class fileList {
    	
    	    @PostMapping("/fileList/")
    	    public DeferredResult<ResultRtn> fileList(@RequestBody Map<String, String> map){
    	    DeferredResult<ResultRtn> result = new DeferredResult<ResultRtn>();
    	    List<String> fileName = new ArrayList<String>();
    	    String files = map.get("files");
    	    if(files.equals("请选择文件所在路径")) {
    	    	//获取所有盘符
    			FileSystemView fsv = FileSystemView.getFileSystemView();
    			File[] fs = File.listRoots();
    			for (int i = 0; i < fs.length; i++) {
    				String name = fsv.getSystemDisplayName(fs[i]).toString();
    				if(!name.isEmpty()) {
    					int begin = name.lastIndexOf("(");
    					int end = name.lastIndexOf(")");
    					name = name.substring(begin+1, end);
    					fileName.add(name);
    					System.err.println(name);
    				}
    			}
    			result.setResult(ResultRtn.of(StatusCode.SUCCESS.code, StatusCode.SUCCESS.msg, fileName));
    	    }else {
    	    	//获取指定目录下一级的所有文件夹
    			String dirName= files;
    			File file = new File(dirName);
    			if(file.isDirectory()) {
    				System.out.println("正在读取"+dirName+"目录....");
    				String[] list = file.list();
    				for(int i=0;i<list.length;i++) {
    					File file2 = new File(dirName+"\\"+list[i]);
    					if(file2.isDirectory()) {
    						fileName.add(list[i]);
    						System.out.println("文件夹:"+list[i]);
    					}
    				}
    				result.setResult(ResultRtn.of(StatusCode.SUCCESS.code, StatusCode.SUCCESS.msg, fileName));
    			}else {
    				System.out.println(dirName+"不是一个目录。");
    				  result.setResult(ResultRtn.of(StatusCode.NULL_RESULT.code, dirName+"不是一个目录。"));
    			}
    	    }
    		return result;
    	}
    
    }
    
    
    

    返回值实体类 自行解决一下

    展开全文
  • Qt获取选择文件夹和文件路径

    千次阅读 2019-03-31 20:13:00
    获取文件夹路径 static QString getExistingDirectory(QWidget *parent = Q_NULLPTR, const QString &caption = QString(), const QString &...
    获取文件夹路径
    static QString getExistingDirectory(QWidget *parent = Q_NULLPTR,
                                        const QString &caption = QString(),
                                        const QString &dir = QString(),
                                        Options options = ShowDirsOnly);
    参数1:父窗口
    参数2:弹出界面的菜单栏文字 
    参数3:打开的初始目录 比如“/”表示根目录
    

    使用方法

    void Widget::on_openSrcDirPushButton_clicked()
    {
        //文件夹路径
        srcDirPath = QFileDialog::getExistingDirectory(
                   this, "choose src Directory",
                    "/");
    
        if (srcDirPath.isEmpty())
        {
            return;
        }
        else
        {
            qDebug() << "srcDirPath=" << srcDirPath;
            srcDirPath += "/";
        }
    }
    

    注意:
    qDebug() << "srcDirPath=" << srcDirPath;输入我们打开目录的路径,比如:/mnt/hgfs,这时候如果我们要读取这个目录下的文件,此时路径应为这里写代码片/mnt/hgfs/然后加上文件名才是文件的全路径。不过或许大家用不到srcDirPath += “/”;`这一句。

    获取文件路径(选择文件):

    获取文件路径使用getOpenFileName即可。使用方法和getExistingDirectory类似。

    static QString getOpenFileName(QWidget *parent = Q_NULLPTR,
                                   const QString &caption = QString(),
                                   const QString &dir = QString(),
                                   const QString &filter = QString(),
                                   QString *selectedFilter = Q_NULLPTR,
                                   Options options = Options());
    参数1:父窗口
    参数2:弹出界面的菜单栏文字 
    参数3:打开的初始目录 比如“/”表示根目录  
    参数4:设置打开的文件类型   
    参数5:看代码。。。

    使用方法:

    void Widget::slotBtnClick()
    {
        QString s = QFileDialog::getOpenFileName(
                    this, "选择要播放的文件",
                    "/",
                    "视频文件 (*.flv *.rmvb *.avi *.mp4);; 所有文件 (*.*);; ");
        qDebug() << "path=" << s;
        if (!s.isEmpty())
        {
    
        }
    }

    另外的方法:

    QString file_full, file_name, file_path;  
    QFileInfo fi;  
      
    file_full = QFileDialog::getOpenFileName(this);  
      
    fi = QFileInfo(file_full);  
    file_name = fi.fileName();  
    file_path = fi.absolutePath();
    void monizhuzhan::filenameInDir()
    {
        //判断路径是否存在
        QDir dir(path);
        if(!dir.exists())
            return;
     
        //查看路径中后缀为.cfg格式的文件
        QStringList filters;
        filters<<QString("*.cfg");
        dir.setFilter(QDir::Files | QDir::NoSymLinks); //设置类型过滤器,只为文件格式
        dir.setNameFilters(filters);  //设置文件名称过滤器,只为filters格式
     
        //统计cfg格式的文件个数
        int dir_count = dir.count();
        if(dir_count <= 0)
            return;
     
    //  //测试
    //  //文件路径及名称
    //  QFile outFile( "filename.txt");
    //  //看能否打开
    //  if(!outFile.open(QIODevice::WriteOnly | QIODevice::Append))  
    //      return ;  
    //  QTextStream ts(&outFile);
     
        //存储文件名称
        QStringList string_list;
        for(int i=0; i<dir_count; i++)
        {
            QString file_name = dir[i];  //文件名称
            //ts<<file_name<<"\r\n"<<"\r\n";
            string_list.append(file_name);
        }
     
    }

    其中注释部分可实现将文件名称存入到txt中。

    总体思路:得到路径--去除路径下的无效文件--统计个数--获取文件名称

    【更多参考】

    转载于:https://www.cnblogs.com/ZY-Dream/p/10632890.html

    展开全文
  • 1、使用filedialog,打开文件夹并选择文件代码如下:#选择文件def openfile():sfname = filedialog.askopenfilename(title='选择Excel文件', filetypes=[('Excel', '*.xlsx'), ('All Files', '*')])return sf...
  • 可以给input添加webkitdirectory属性,但是拖拽上传文件夹,我找遍全网也没找到满意的答案,最接近的一个答案,确实是拿到了数据,这里有demo: https://wicg.github.io/direct…但是拿不到文件所在路径,也就是...
  • 转自http://www.blogjava.net/supercrsky/archive/2008/06/17/208641.html 解决方案1: 调用windows 的shell,但会有安全问题. ... * 以供用户实现对系统文件夹选择的功能  * 文件夹选择对话
  • VB实现选取文件夹路径

    万次阅读 2014-04-22 18:24:36
    在VB中直接选取文件路径直接使用控件就可以实现 选取文件夹路径可以采用下述办法。   添加模块文件直接进行调用。模块内容代码 '---------------------------------------------------------------------------...
  • javascript 选择文件夹对话框(web)

    千次阅读 2021-06-13 08:45:25
    没有办法,实践证明最好的解决办法是自己写一个OCX控件,这样就只要注册一下OCX控件就可以了,同时OCX控件的可...这个OCX控件中提供了一个getFiles()方法,只要获取控件对象,然后调用getFiles()方法就可以获取对应...
  • java 弹出选择目录框(选择文件夹),获取选择文件夹路径 java 弹出选择目录框(选择文件夹),获取选择文件夹路径:int result = 0;File file = null;String path = null;JFileChooser fileChooser = ...
  • 1.关于选择本地文件夹路径,我试过原始的方法,获取到的是所有当前文件夹下的所有文件,而且如果当前文件夹下无内容,选择文件夹后是不触发事件的,就更拿不到路径了。所以得另辟蹊径。 以下是vue框架里使用的: ...
  • 这是最近花了一周多手工马出来的,前段用了MetroUI,后台是ThinkPHP,数据库MySQL,先看看效果吧。由于项目涉及敏感词汇我就码了一下...1.选择要上传的文件夹,上传以后默认都在根目录下。 2.看看后台管理界面的效果
  • * browseFolder.js * 该文件定义了BrowseFolder()函数,它将提供一个文件夹选择对话框 * 以供用户实现对系统文件夹选择的功能 * 文件夹选择对话框起始目录由 * Shell.BrowseForFolder(WINDOW_HANDLE, Message, ...
  • Qt 程序获取程序所在路径、用户目录路径、临时文件夹等特殊路径的方法经常我们的程序中需要访问一些特殊的路径,比如程序所在的路径、用户目录路径、临时文件夹等。在 Qt 中实现这几个功能所用的方法虽然都不难,...
  • 参考了下列文章: ...https://www.cnblogs.com/qingtian224/p/5566901.html https://www.cnblogs.com/it-duit/p/6026907.html 头文件: #include <Windows.h> #includ
  • js实现上传文件夹

    千次阅读 2019-06-10 09:50:26
    此文件管理器是开款开源产品,无论您是个人还是企业都可以获取他的源代码来进行二次开发。我们为ASP.NET,JAVA,PHP等语言提供了示例,您可以同时选择这3种开发语言来进行项目开发。同时我们将提供长期的更新和维护...
  • 最近在做课程设计,需要通过js读取本地文件,并且获取本地文件路径,然后在搜寻了一些资料,在此分享记录一下. HTML5提供了一台API可以实现文件的读写,文件读取利用API是FileReader 代码如下: 读取本地文件 <!doctype...
  • 点击下载弹出功能页面选择下载路径以及更改文件名,然后确认,将路径及文件名发给后台
  • 安卓文件夹路径

    千次阅读 2022-01-14 17:44:21
    Android 文件外/内部存储的获取各类存储目录路径 - JavaShuo前言 对于任何一个应用来讲,不管是PC端应用仍是Android应用,存储确定是必不可少的。对于不少作Android开发的同窗来讲,可能认为文件存储很简单,调用...
  • html或者jsp中弹出文件另存为的对话框,可以调用document.execCommand方法调用JS方法document.execCommand即可在前台页面调出另存为对话框,将将服务器上存放的文件保存到本地。HTML页面另存为对话框DEMO.rar...
  • 本文旨在获取某个文件夹中所有文件名,同时可以实现获取不带文件路径和后缀的文件名,便于对某些文件夹中文件的整体操作。#include &lt;iostream&gt; #include &lt;string&gt; #include &lt;...
  • Git 获取指定文件或者文件夹

    千次阅读 2020-12-19 21:06:50
    在进行项目开发的时候,有时候会有这样的需求那就是:我们只希望从Git仓库里取指定的文件或者文件夹出来。在SVN里面,这非常容易实现,因为SVN基于文件方式存储,而Git却是基于元数据方式分布式存储文件信息的,它会...
  • cmd中,使用bat命令,快速实现获取当前文件夹下所有文件名(不包含文件夹中的文件名), 具体命令如下: cd.>fileName.txt dir *.* /b/N >fileName.txt echo 获取文件名,已保存到当前文件夹下的...
  • 代码 CString s_save_path;//存放选择的目录 CMutex g_mtx; //选择文件夹对话框回调函数 int CALLBACK BrowseCallBackFun(HWND hwnd, UINT uMsg, LPARAM lParam, LPARAM ... case BFFM_INITIALIZED: //选择文件夹...
  • Electron选择文件、文件夹对话框

    千次阅读 2021-01-13 15:26:01
    为了使每次选择的文件都得到更新,在input对象用完后每次都移除出html中,下次使用时再重新创建添加到html中。代码如下:/***按钮事件实现函数*原理:利用input标签的file类别,打开选择文件对话框*通过change事件...
  • 一、获取当前文件路径 1.System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName 获取模块的完整路径,包括文件名。获取得到的是Module的文件名,如果在VS2008的调试环境中,获取的是 [程序名]....
  • 文件可以获取指定目录下的所有文件的绝对路径及文件的名称,同样定义一个静态全局变量也可以统计指定目录下的总文件数目
  • 示例:获取 ./components 下所有的文件夹名称 let components = [] const files = fs.readdirSync('./components') files.forEach(function (item, index) { let stat = fs.lstatSync("./components/" + item...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,325
精华内容 47,330
关键字:

html实现选择文件夹并获取路径