How to solve the problem of using js to get the absolute path of inputfile to preview picture C:fakepath
This article mainly shows you "how to solve the C:fakepath problem of using js to get the absolute path preview picture of inputfile", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use js to get inputfile absolute path preview picture C:fakepath problem" this article.
1. problem
The page has an input file server control, and an image p is a container for the image tag. When we click on the value of input file to change, we append the image tag to p; but when we dynamically obtain the path of input file through the onchange event of js, we find that the printed path of console.log (path) is blocked by the browser, for example: C:fakepathfile.jpg
two。 Reason
Because of the security mechanism of the browser, when we get the path of input file, it is replaced by fakepath, hiding the real physical path. Of course, adjusting the browser security settings of the browser can solve this problem, but this solution is obviously not what we want, and it is impossible for everyone to set browser security options.
3. Know window.URL.createObjectURL ()
The URL.createObjectURL () method creates a URL pointing to the parameter object based on the parameter passed. The life of this URL exists only in the document in which it was created, and the new object URL points to the executing File object or Blob object. Syntax: objcetURL = window.URL.createObjectURL (file | | blob); parameters: File object and Blob object; File object is a file, for example, if I use the file type= "file" tag to upload a file, then each file in it is a file object. The Blob object is binary data. For example, in XMLHttpRequest, if you specify requestType as blob, the resulting return value is also a blob object. Each time createObjectURL is called, a new URL object is created. Even if you have already 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, you should release it when you make sure it is no longer used.
4. Solution.
FunctiongetObjectURL (file) {varurl=null;if (window.createObjcectURLpersistent undefined) {url=window.createOjcectURL (file);} elseif (window.URLURLpersistent undefined) {url=window.URL.createObjectURL (file);} elseif (window.webkitURLdisabled undefined) {url=window.webkitURL.createObjectURL (file);} returnurl;} / / usage $("# file") .change (function () {varfile=this.files [0]; varurl=getObjectURL (file); / / blob: URL
The above is all the contents of this article entitled "how to solve the problem of how to use js to get the absolute path preview picture C:fakepath of inputfile". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
