Solve the problem of Fakepath when uploading local files

First, you should look at what the Fakepath problem specifically refers to:

When you write the page, you need to select the local image to the server, while the selected picture is previewed in the page, the code is written like this:

$ ("input[type= ' file ']"). On (' Change ', function () {
    $ ('. Content '). attr (' src ', $ (this). Val ());
    Alert (This). Val ());
});

This is how I choose the Picture:

However, you will find the value actually added to the input box (the SRC value of the image is):

The Fakepath here is a string created by modern browsers to hide the actual path of the file. The next step is to find a way to find out the original path of the image, and the following code is the solution found on the Web:

$ ("input[type= ' file ']"). On (' Change ', function () {
    var ofreader = new FileReader ();
    var file = document.getElementById (' Input-file '). Files[0];
    Ofreader.readasdataurl (file);
    Ofreader.onloadend = function (ofrevent) {
        var src = oFRevent.target.result;
        $ ('. Content '). attr (' src ', src);
        alert (src);
    }
});

So the problem is solved.

Read more about a good solution to this problem see the great God's Blog