CODEWITHSUNDEEP
phpcodeigniterjqueryfile-upload
Sahil Jariwala
Sahil Jariwala

Reputation: 253

upload image using ajax

I have the following html form. Here the image upload is working fine. But i want to make the image upload in ajax so that before submitting the form with other details. The preview of the image can be shown in side.

<form action="<?=base_url();?>index.php/insert/insertdata" method="post" enctype="multipart/form-data">

        <tr><td><b>Title: </b></td><td><input type="text" name="title"/></td></tr>
        <tr><td><b>Url: </b></td><td><input type="text" name="url"/></td></tr>

        <tr><td><b>Image: </b></td><td><input type="file" name="image"></td></tr>

        <tr><td><b>Status: </b></td><td><select name="status"><option value="visible">Visible</option><option value="invisible">Invisible</option></select></td></tr>  

        <tr><td><input type="submit" value="submit"/></td><td><input type="reset" value="reset"/></td></tr>
    </form>

jquery is also welcome. But I would like to avoid using the form tag again.

Upvotes: 0

Views: 236

Answers (2)

Awais Qarni
Awais Qarni

Reputation: 18006

If jquery is welcomed then there is no other better solution than uploadify. Use it and you will love it. Check also demo.

Upvotes: 0

naveen
naveen

Reputation: 1068

once your uploading a image then fetch the image name with url and add to the 

$.ajax(url,{data},function(res){

        //check status if it is 200 then assign the res to the img
       $('#img').attr('src',res);

})

//Html write this after the image file

 <img src="" id="img">

Upvotes: 2

Related Questions