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

1

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.

answered Oct 27, 2016 at 5:48

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

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

2 Comments

shiv pratap Over a year ago

but i am using same code. not working ..perhaps my code have syntax mistake .... thanks

shiv pratap Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related