Question

<input type="file" id="file-id" name="file_name" onchange="theimage();">

这是我的上载纽。

<input type="text" name="file_path" id="file-path">

这是我必须展示档案全部途径的文本领域。

function theimage(){
 var filename = document.getElementById( file-id ).value;
 document.getElementById( file-path ).value = filename;
 alert(filename);
}

这是解决我问题的 Java。但是,在警示价值中,我给我带来了压力。

C:fakepath	est.csv

页: 1

test.csv

但是,我想到的是地方上的完全合格的档案途径。如何解决这一问题?

如果这是出于安全考虑的问题,那么应该采取什么替代方式来做到这一点?

Answer 1

一些浏览器有一个安全特征,使 Java无法了解你的档案,无法通向当地。很有意义——作为客户,你不想让服务器了解你的当地机器档案系统。如果所有浏览者都这样做,那将是 n。

Answer 2

Use

document.getElementById("file-id").files[0].name;

而不是

document.getElementById( file-id ).value

Answer 3

我在投入上使用物体文档:onchange。您的投入文件类型这个例子使用“AsDataURL”功能,因此,你应当有标签。文档检索物体还阅读了AsBinaryString,以获取二元数据,然后可以用来在服务器上建立同一档案。

例:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}

Answer 4

如果你去因特网探索者、工具、互联网选择、安全、海关,就会发现“在将档案上载到服务器时,就包括当地名录””(这是一条倒数),并点击“可使用”的。这一工作

Answer 5

我高兴的是,浏览器会设法使我们免受侵扰性文字的侵扰。我不高兴的是,我会把一些东西带进浏览器上,使风格简单地看上像一个黑客座!

我使用了“带”;横跨和过;代表投案量,以便我能对“带”、“干).”、而不是“带”、“投入”和(由于“电传”原因)适用适当的搭配。由于这一原因,国际独立实体希望向用户展示一种价值,这种价值应当得到保证,可以将他们置于警惕之下,而且至少是受到逮捕(如果他们不是完全躲避!) 。 MORE IE-CRAP!

感谢在此作解释的人:。 IE Browser Security: Appending “fakepath” to file path in content[type=“file”], I ve place con a small fixer-upper...

下面的法典有两条内容——它确定了一条灯塔,在高载田向Blur开火,并更新了一条带有清洁档案的元素,赢得了用户的护理。

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $( input[type="file"] );
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement( span )).addClass( file-underlay )
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword  this  changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings( .file-underlay );
                    // check for IE s lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\fakepath\/i,   );
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

Answer 6

在 Chrome/ium基 app像电一样,你只能使用目标。档案:

(如采用“React JS”

const onChange = (event) => {
  const value = event.target.value;

  // this will return C:fakepathsomefile.ext
  console.log(value);

  const files = event.target.files;

  //this will return an ARRAY of File object
  console.log(files);
}

return (
 <input type="file" onChange={onChange} />
)

<代码>File Object 以上谈:

{
  fullName: "C:UsersmynameDownloadssomefile.ext"
  lastModified: 1593086858659
  lastModifiedDate: (the date)
  name: "somefile.ext"
  size: 10235546
  type: ""
  webkitRelativePath: ""
}

因此,如果你走过这条路的话,你就只能获得<条码>fullName。

请注意,这只会在hr/ium浏览器上工作,因此,如果你不需支持其他浏览器(如你重建电线项目),你可以使用。

Answer 7

I came accross the same problem. In IE8 it could be worked-around by creating a hidden input after the file input control. The fill this with the value of it s previous sibling. In IE9 this has been fixed aswell.

我之所以要了解整个道路,是因为要在上载之前进行 j印图像审查。现在,我必须上载文件,以对选定的图像进行预览。

Answer 8

如果你真的需要寄出lo的档案的全部道路,那么你可能不得不使用像已签字的java探测器这样的东西,因为如果浏览器寄出这种信息,就没有任何办法。

Answer 9

使用文档读物:

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $( div.withBckImage ).css({  background-image : "url(" + e.target.result + ")" });

        }
    }

Answer 10

seems you can t find the full path in you localhost by js, but you can hide the fakepath to just show the file name. Use jQuery to get the file input s selected filename without the path

Answer 11

我已发现,这方面的最佳解决办法是使用像Multer这样的中间知识。这里迅速倒塌:

npm i multer
Add enctype="multipart/form-data" to your html form.
In your backend dock where you re making your post request, require multer (const multer = require( multer ))
In the same dock, set your upload destination: const upload = multer({dest: uploas/ }). This will automatically create a local folder called uploads where your files will be added. The code I ve included shows you how to upload to your local disk storage. If you re using cloud storage (e.g. AWS, Azure, Cloudinary etc.) you can check out the Multer docs to see how to manage that. There aren t too many extra steps though.
in your post request, add upload.single (for one file) or upload.array (for multiple files), like this:

router.post( /new , upload.single( image ), async function(req, res) { // image  should be the name of the input you re sending in the req.body
  console.log(req.file) //note, if you re using  upload.array , this should be  req.files 
});

q. 档案将有一个你在你的要求中可以使用的全方位路径名称。欲了解更多信息,请查《手册》:

https://www.npmjs.com/ Package/multer 。

我希望这一帮助!

Answer 12

You would be able to get at least temporary created copy of the file path on your machine. The only condition here is your input element should be within a form What you have to do else is putting in the form an attribute enctype, e.g.:

<form id="formid" enctype="multipart/form-data" method="post" action="{{url( /add_a_note  )}}">...</form>

you can find the path string at the bottom. It opens stream to file and then deletes it.

友情链接