upload file using jquery ajax

Question

I'm trying to upload a file with jquery but I don't want to refresh the page.

I read some duplicate questions but they didn't solve my problem.

please tell me if I'm wrong in using codes.

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/myajax.js" type="text/javascript"></script>

html code:

<form id="uploadpic" action="func/uploader.php" enctype="multipart/form-data" method="post" onsubmit="sendAjax('uploadpic','#image_place'); return false;">
<label for="UserImage" class="fright">new pic</label>
<div class="file-input width-100">
    <input type="file" id="File1" class="choose-file" name="choose-file" onchange="javascript: document.getElementById('uploadpic').submit();" />
    <span class="file-button">- - - - -</span>
</div>
</form>

and myajax.js:

function sendAjax(n,des,dataform){
    if(dataform==undefined) dataform = des;
    $(dataform).animate({opacity:0.5},100);
    var frm = $('#'+n);
        $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
        $(des).html(data);
            $(dataform).animate({opacity:1},100);
        }
    });
    return false;
}

thanks...

Working example: jsfiddle.net/vishalvaishya/xh65S As it uses HTML 5 so supported on HTML5 compatible browsers only. irefox 4+, Google Chrome, IE10, Safari 5+. — Vishal Vaishya
– Vishal Vaishya, Commented Aug 14, 2013 at 4:00

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-12-08 10:54:25Z

3

You have to use an ajaxForm submit() function here. Basically I'm a RoR developer. You have to change the Javascript part. (Remove on submit handler from form tag)

Try

<script type="text/javascript">
  $(document).ready(function(){
    $('#File1').change(function() {
      $("#uploadpic").ajaxForm({ target: "#image_view" }).submit();
      return false;
   });
 }); 
</script>

#image_view is just a div. where the response from ajax function can be loaded.

edited Dec 8, 2013 at 10:54

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

answered May 23, 2013 at 6:05

Jyothu

3,15420 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

upload file using jquery ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related