Use JS to get input file path C:\fakepath\ problem __js

Sometimes, we add a function to the program, the local test is fully functional, but a release to the web on a variety of error, this time we need to pay attention to it.

1. The Problem page has an input file server control, a div,div is the Image label container, when the value of the input file changes, we add image tags to the div; But when the path of input file is dynamically obtained through the onchange event of JS, it is found that the path that Console.log (path) prints is blocked by the browser, for example: C:\fakepath\file.jpg
2. because of the security mechanism of the browser, when we get the path of input file is replaced by Fakepath, hiding the real physical path. Of course, adjusting browser security settings for browsers can solve this problem, but this solution is clearly not what we want, and it is impossible to have each set browser security option.
3. Know window. The Url.createobjecturl () Url.createobjecturl () method creates a URL to the Parameter object based on the parameters passed in, and the life of the URL exists only in the document in which it was created. The new object URL points to the executing file object or Blob object.
Syntax: objceturl = window. Url.createobjecturl (File | | blob);
Parameters: File objects and Blob objects; File objects are files, such as I use the file type= "file" tag to upload files, then each of the files are a file object. A BLOB object is binary data, for example, in XMLHttpRequest, if a requesttype is specified as a blob, the resulting return value is also a Blob object.
Each time the Createobjecturl is invoked, a new URL object is created. Even if you have created a URL for the same file, if you no longer need this object, to release it, you need to use the Url.revokeobjecturl () method. When the page is closed, the browser automatically releases it, but for optimal performance and memory usage, it should be freed when it is not used.
4. Solutions

$ (document). On (' Change ', ' #PictureUrl ', function () {//pictureurl is the ID of input file
        //console.log (this.files[0]);
        function Getobjecturl (file) {
            var url = null;
            if (window.createobjcecturl!= undefined) {
                URL = window.createojcecturl (file);
            } else if (window. URL!= undefined) {
                url = window. Url.createobjecturl (file);
            else if (window.webkiturl!= undefined) {
                URL = window.webkitURL.createObjectURL (file);
            }
            return URL;
        var objurl = Getobjecturl (This.files[0])//The Objurl here is the true path of input file
        $ (' #imgContainer '). HTML ("
 

 
5. Examples 
<%@ Page language= "C #" autoeventwireup= "true" codefile= "UpFileBox.aspx.cs" inherits= "Publicpage_upfilebox"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">