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

Question

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

Answer 1

我们在使用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)函数中可以区分不同的浏览器，获得文件的真是路径。