How to remove this DATA 64 URL and leave normal file url

Asked

Viewed 37 times

0

When I do upload of an image, it adds a sequence of letters, numbers and characters to the URL. I’d like to know how to change this, like, instead of this many characters, just pop up the image link.

Below is the Javascript code I’m using:

$(document).on('change', '#image-upload', function(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML =
                        '<a href="javascript:;" class="add-image"><img width="100px" height="100px" class="image-thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/></a>'
                        ;
                $("#memes-custom").append(span);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
});
  • The url can only exist if the file is saved to the server. While it is only in the browser, uploaded by javascript will be displayed the file data in this Data64 format

  • 1

    The problem is that there is no link. These characters are precisely the content of the image. You would need to save the image to the server to get the result you want.

  • 1

    I removed the PHP tag because it didn’t seem to be related to the question, but you can make an asynchronous request for a PHP script that writes this image to a file and generates the final URL, as already commented by colleagues. Uploading an AJAX and PHP file is constantly discussed here and you will find many questions to assist you in this process.

  • what kind of change I would make to this code? I’m having a hard time with this!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.