How to upload image using jQuery?

Question

I attached JS and index.php file. This code not working for image, but for type text it is working properly. I have searched very much but not getting how can upload image by jQuery.

index.php file:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title><?= TITLE . ' | ' . ucfirst($page); ?></title> <!-- Tell the brow form_groupser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <?php include('inc/css-inc.php'); ?> </head> <body> <div class="row form_group"> <div for="inputName" class="col-sm-2 control-div">Image A. </div> <div class="col-sm-4"> <input type="file" class="form-control" id="qimage" name="imga" onchange="un(this.value)"> </div> <button type="button" onClick="return savequestion()" id="savequestion" class="btn btn-info pull-right"><?= $act; ?></button><!--</form>--> <!-- jQuery 2.1.4 --> <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script> <!-- Bootstrap 3.3.5 --> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>

Js file

$('#savequestion').click(function () { var qimage1 = $('#qimage').prop('files')[0]; var form_data = new FormData(); form_data.append('qimage', qimage1); form_data.append('mod', mod); form_data.append('req', req); $.ajax({ url: 'common_process.php', dataType: 'text', cache: false, contentType: false, processData: false, data: form_data, type: 'POST', success: function (data) { alert(data); } }); });

Mayank Pandeyz · Accepted Answer · 2016-10-27 05:48:56Z

Try this:

HTML:

<input id="pic" type="file" name="pic" /> <button id="upload">Upload</button>

Jquery:

$('#upload').on('click', function() { var file_data = $('#pic').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); $.ajax({ url : 'upload.php', // point to server-side PHP script dataType : 'text', // what to expect back from the PHP script, if anything cache : false, contentType : false, processData : false, data : form_data, type : 'post', success : function(output){ alert(output); // display response from the PHP script, if any } }); $('#pic').val(''); /* Clear the file container */ });

Php:

if ( $_FILES['file']['error'] > 0 ){ echo 'Error: ' . $_FILES['file']['error'] . '<br>'; } else { if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name'])) { echo "File Uploaded Successfully"; } }

This will uload your file to "uploads" folder. And also check for the folder write permission.

but i am using same code. not working ..perhaps my code have syntax mistake .... thanks
mayank ...Agar hum without form tag use karte hain...jquery main ..toh isse problem toh nhi hoti hain... coding speed main .

Collectives™ on Stack Overflow

How to upload image using jQuery?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related