javascript - How to get the source of an image from upload form? - Stack Overflow

admin管理员组

文章数量:1394156

One of my first larger projects so please bear with me. I have a script which will help me resize an image and turn it into base64. This is how it begins:

var createImage = function (src) {
    var deferred = $.Deferred();
    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };
    img.src = src;
    return deferred.promise();
};

And my question is to get the image source from the upload form to the script?

I've tried to stitch together (with help from other sources) a function with the Filereader API:

var createImageURL = function () {
    var fileinput = document.getElementById('fileinput');
    file = fileinput.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (event) {
      var blob = new Blob([event.target.result]); 
      window.URL = window.URL || window.webkitURL;

      var blobURL = window.URL.createObjectURL(blob);

    }
    return blobURL;
};

However this returns a GET error in the console.

One of my first larger projects so please bear with me. I have a script which will help me resize an image and turn it into base64. This is how it begins:

var createImage = function (src) {
    var deferred = $.Deferred();
    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };
    img.src = src;
    return deferred.promise();
};

And my question is to get the image source from the upload form to the script?

I've tried to stitch together (with help from other sources) a function with the Filereader API:

var createImageURL = function () {
    var fileinput = document.getElementById('fileinput');
    file = fileinput.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (event) {
      var blob = new Blob([event.target.result]); 
      window.URL = window.URL || window.webkitURL;

      var blobURL = window.URL.createObjectURL(blob);

    }
    return blobURL;
};

However this returns a GET error in the console.

• javascript
• html
• filereader

Share Improve this question Follow edited Aug 31, 2013 at 12:51 Jonas Bolin asked Aug 31, 2013 at 12:39 Jonas BolinJonas Bolin 60611 gold badge1111 silver badges2929 bronze badges 1

• readAsArrayBuffer is asynchrnous/non-blocking, var blobURL is in a different scope to your return, return blobURL will happen before file read finishes. – Paul S. Commented Aug 31, 2013 at 13:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Rather than going via Blob, convert your <input>'s File to an ObjectURL directly, saving yourself a lot of trouble by keeping your code synchronous and requiring fewer lines of code.

function inputToURL(inputElement) {
    var file = inputElement.files[0];
    return window.URL.createObjectURL(file);
}

var url = inputToURL(document.getElementById('fileinput'));
createImage(url);

This works because a File is a Blob per spec (as pointed out by Ray Nicholus)

---

It's not advised (as File inherits from Blob already) and highly unusual to want to convert between them, but not impossible. I'm including this so you can see how to structure FileReader code if you need it in future, not as a solution to your problem. To convert <input type="file" />'s first file to Blob, you would do

function fileToBlob(inputElement, callback) {
    var fileReader = new FileReader();
    fileReader.onload = function () {
        callback(new Blob([this.result]));
    }
    fileReader.readAsArrayBuffer(inputElement.files[0]);
}

Where callback takes a Blob as it's first parameter. Remember that since the readAsArrayBuffer caused us to use a callback, we had to write this so it would work in an asynchronus environment.

本文标签： javascriptHow to get the source of an image from upload formStack Overflow