jQuery get an image source encrypted/

Question

Hi guys, i kinda sorted out my problems with forms with using serializeArray, but as you may know it lacks of support for input/file, so decide to merge it with my serialized data. Now i create the object and everything i get the name of the file with .val(). But i can't the image source. For example i wanna do this:

        alert(jQuery('.inputBox#pic').attr(src));
        var obj = {'name'   : 'pic',
                   'value'  : jQuery('input#pic').src};

The only problem is that it doesn't work. I can't get the image source ready for upload. and without it i can't make a successful POST request.

Answer 1

You may take a look at the jQuery.form which could be used to ajaxify your forms. It also supports file input fields.

Answer 2

What is the point of that alert() call? And what are you trying to do with the src attribute? jQuery(selector).src doesn't do anything because you can't access the img element or its attributes that way.

If you want the value of src, then use:

var imgSrc = $('#pic').attr('src');
// or
var obj = {
    'name' : 'pic',
    'value' : $('#pic').attr('src');
};

I'm not sure how you plan on performing a file upload this way, but that's how you would do it. Still, I would suggest skimming the jQuery documentation to make sure you understand the basics on jQuery DOM manipulation. You always use .attr() to get or set element attributes on a jQuery result. If you want to access actual element object or its properties, you need to use:

var elPic = $('#pic')[0];
// or
var imgSrc = $('#pic')[0].src;

Also, there's usually no point in mixing ID selectors with class selectors since IDs should be unique.

Lastly, I assume ".attr(src)" was a typo in your code, but if it wasn't then you need to brush up on your JavaScript so that you know the difference between a variable and a string literal. String literals need to be enclosed in either single or double quotes, otherwise JavaScript thinks you're passing the function a variable named src rather than the string "src".

Answer 3

You can't post a file that way.

Even if you were able to get the complete source of the file (which is not even allowed in some browsers), it will be an address to a local file that you can not access.

The only way to post a file to the server is by posting the form that the upload control is in. There is no other way to get a file from the client computer, for security reasons. This means that you have to post the actual form on the page, you can't make an AJAX post.