shiv pratap shiv pratap - 1 year ago 56
jQuery Question

how can upload image using jquery below using this code but not working me

I attached js and index.php file .this code not working for image . but for type text working properly. I have searching very much but not getting how can upload image by jquery.
index.php file

<!DOCTYPE html>
<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');?>
<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)">
<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>

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);
url: 'common_process.php',
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(data){

Answer Source

Try this:


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


$('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

                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 */


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download