大海话语 2021-10-17 19:15 采纳率: 87.6%
浏览 1072
已结题

如何获取前端上传文件的主机路径与文件名

我想取得一个文件上传后,自动获取文件上传的电脑路径,存入数据库,以作备份。但是,前端 的html如何写呢? 还是在后端进行读取或判断呢?

  • 写回答

4条回答 默认 最新

  • 神仙别闹 2021-10-17 20:30
    关注

    我们在使用html中的<input type="file" />控件上传文件时,有时需要在本页面获取上传文件的路径名称,但是由于现在浏览器出于安全考虑,大多数都无法获得文件的真实路径。如果要在js中解决这个问题,可以区别不同品牌的浏览器,进行不同的操作来获得文件的真实路径,比如谷歌浏览器可以用:window.webkitURL.createObjectURL(File file)来获得,详细代码如下:

    1、首先定义文件上传和预览照片的两个控件:

    <input type="file" name="pic" onChange="showPic(this)">
    <img src="" id="preview" width="300" height="240" style="opacity:0">    // 用于显示上传的图片,默认定义为不显示
    

    2、在js中定义两个函数:

     function showPic(obj) {
            var fileUrl = getObjectURL(obj.files[0]);
            if (fileUrl != null) {
                document.getElementById("preview").src = fileUrl;      // 图片预览
                document.getElementById("preview").style = "opacity:1";
            }
        }
        //建立一个可存取到该file的url
        function getObjectURL(file) {
            var url = null;
            // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL != undefined) {   // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {        // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {  // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url;
    
    }
    

    在getObjectURL(file)函数中可以区分不同的浏览器,获得文件的真是路径。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 10月27日
  • 已采纳回答 10月19日
  • 赞助了问题酬金 10月19日
  • 创建了问题 10月17日

悬赏问题

  • ¥15 u盘问题:盘符不显示 无媒体
  • ¥50 R语言读取nc按月均值转为tif
  • ¥30 智能车串级pid调参
  • ¥15 visual studio code翻译老是错误
  • ¥20 卫星测高数据的高程转换
  • ¥15 爬取招聘网站数据信息
  • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
  • ¥15 ultralytics库导出onnx模型,模型失去预测能力
  • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题
  • ¥15 SQL数据自动生成问题