0

Here is my snippet that ajax a server-side script that uploads the file being submitted. It triggers on change of the input[type=file].

    $('#magLogo').on('change', function(e) {
        var $input = $(this);
        var file = e.currentTarget.files[0];
        var data = new FormData();

        data.append('file', file);

        $.ajax({
          type: "POST",
          data: data,
          cache: false,
          contentType: false,
          processData: false,
          url: 'my/path/to/upload/script.php'
        })
          .done(function(fullPath) {
            $input
                .parents('#magLogoCont')
                .css('background-image', "url('"+fullPath+"')");
          });
    });

On the other side, the PHP script returns a JSON string that contains the temporary directory of the uploaded file (which looks like file:///C:/wamp/tmp/filename.jpg as I'm running on Windows).

The problem is when I want to put this image as the background of a div to show to the user that it has been uploaded, the error I get in the console says Not allowed to load local resource). I cannot upload it directly in the final directory as all information are not available by the time the user chooses its image to upload.

Is there a way of doing what I want to do?

Many thanks!

D4V1D
  • 5,805
  • 3
  • 30
  • 65

1 Answers1

3

No, you cannot integrate a file to the browser via such an "url"/path.

Move the Image to a folder under your httpfiles root of the web-page and direct to that path in a relative way.

helle
  • 11,183
  • 9
  • 56
  • 83