How to Upload file using jquery ajax method without using submit button

Question

I am really happy with the priceless suggestions that you all gave me last time.i really thank you all. But this time i am trying to upload an file using ajax. As the user select the file in the browse window, it straight away uploads the image. Please help me with this too. Thank you all.

This is my code:

function upd(str)
{
$.ajax({
       type:'post',
       url:'upld.php',
       datatype:'php',
       data:'fname='+str,
       success:function(responce)
       {
            alert("Uploaded");   
       }
       });
}

</script>
</head>

<body>
<form action="upd.php" method="post" enctype="multipart/form-data">

    <input type="file" name="namefile" id="namefile" onSelect="upd(this.value)">

</form>

and my upld.php contains the following code:

<?php


$target="uploads/";
$target=$target.basename($_FILES['file']["name"]);
move_uploaded_file($_FILES['file']["tmp_name"],$target);
echo basename($_FILES["file"]["name"])."File Uploaded";


?>

This has been asked a million times. Here, have a look at the FormData API. mdn.beonex.com/en/DOM/XMLHttpRequest/FormData/… — mingos
– mingos, Commented May 28, 2014 at 10:42
Uploading files through ajax is not possible, but you can use base64 encoding and send a nice and long string to your backend :) Anyway, you can use systems like uploadify (uses flash) to do it — kosmos
– kosmos, Commented May 28, 2014 at 10:42

codebased · Accepted Answer · 2014-05-28 10:42:43Z

2

You can use: $("form:first").submit();

On Change event can be attached against file object through jquery.

Otherwise, it may not be straight forward as you want. However, I have used Uploadify Jquery plugin that helps to do the following:

Upload multiple documents
Upload through drag and drop.

http://www.uploadify.com/about/

answered May 28, 2014 at 10:42

codebased

7,07311 gold badges57 silver badges90 bronze badges

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

3 Comments

gomzy Over a year ago

Thanks alot mate, i will look at the link you forwaded.

gomzy Over a year ago

is there no way to modity te above code and upload the file.

codebased Over a year ago

instead of onselect, onchange should do the job for you. You can submit the form itself and you don't need ajax call here: <form action="upload.php" method="post"> <input type="file" onchange="this.form.submit()" name="myFile"/> </form>

Collectives™ on Stack Overflow

How to Upload file using jquery ajax method without using submit button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related