如何从URL JavaScript和PHP加载文件

Question

I'm facing a problem for hours, and I don't find a solution.

Basically, in my app I load files and pass it to javascript with :

<input type="file" multiple onchange="mixer.photo.readfiles(this.files)" />

Then, javascript use the file object and I do some stuff in javascript.

My problem is that I also want to do the same thing FROM an URL parameter (url of an image) : Let's say people arrive to my website with the url https://mywebsite.com?img=imgurl.png I want to handle this imgurl.png, and load it to my javascript exactly the same way that I load a file coming from my "input type=file"

Then, when people will arrive in my page using a url with parameter, they will not need to upload with the

Do you know how I can do that ?

Thank yoh !

Answer 1

Due to security reasons, browsers does not allow you to read local files that are not explicitly selected by the user (either using input file type or drag and drop).

If that was not the case, a malicious website could generate a link with parameters that points to a sensitive file on user system which they can read and upload to server without the user knowing it, which is a serious security flaw.

File objects may be obtained from a FileList object returned as a result of a user selecting files using the element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.

Source: File Reader

Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML element or by drag and drop.

Source: Using files from web applications