Geek asks and answers

How to upload images from a local computer to a JS object, avoiding uploading to a server

I want to upload an image file from a computer directly to any js object without using any server component. For example, I want to select an image from a local computer and display it on a web page. Is there a way to avoid uploading files to the server?

Actually, I want to write a kind of multiple image downloader, but before uploading to the server I want to rotate some images, create an xml file with some data, such as user ID, a list of image file names, and pin all the images to this xml and then send him to the server. How can I do this on the client side?

+5
source share
3 answers

There is a method with HTML5, but it requires the user to dump the file into the target folder or use the field <input type="file"/>, otherwise it will be a security problem.

Using the API File, you can read files, and especially you can use the method FileReader.readAsDataURLto set the content as the URL data:for the image tag.

Here is an example:

$('#f').on('change', function(ev) {
    var f = ev.target.files[0];
    var fr = new FileReader();

    fr.onload = function(ev2) {
        console.dir(ev2);
        $('#i').attr('src', ev2.target.result);
    };

    fr.readAsDataURL(f);
});​

http://jsfiddle.net/alnitak/Qszjg/

+13
source

Using the new API files , you can access content from a local drive.

You put the traditional upload field <input type="file">on your page and handle the event onchange.

MDN has a good entry with all the details.

FileList, Files. FileReader.readAsDataURL(File), , URL- <img> <canvas> .

+2

You can use the createObjectURL method of the window.URL object, it does not have browser support, although

http://jsfiddle.net/LvAqp/ only works in chrome and firefox

+1
source

More articles:


All Articles