如何在codeigniter中使用ajax上传图片?

I'm trying to upload image with jQuery and ajax function, and how can I fetch all details of image file, like in php we use $_FILE()

我尝试使用jQuery和ajax函数上传图像，如何获取图像文件的所有细节，比如在php中使用$_FILE()

Here is my code

这是我的代码

$("#uploadimg" ).click(function() {
     $( "#file" ).click();
});

$( "#file" ).change(function(e) {
    var file=$('#file').val();
    alert(file);
    die();
    e.preventDefault();
    $.ajax({
        url:'http://localhost/JSG/blog/uploadimg',
        secureuri:false,
        type: "POST",
        fileElementId:'image',
        dataType: 'text',
        data:{ file: file },
        cache: true,
        success: function (data){
            alert(data);
            console.log(data);
        },
    });
});

Controller

控制器

public function uploadimg()
{
    $var = $_POST['file'];
    print_r($var);
    if($this->input->post('file')) {
        $config['upload_path'] = 'upload'; 
        $config['file_name'] = $var;
        $config['overwrite'] = 'TRUE';
        $config["allowed_types"] = 'jpg|jpeg|png|gif';
        $config["max_size"] = '1024';
        $config["max_width"] = '400';
        $config["max_height"] = '400';
        $this->load->library('upload', $config);

        if(!$this->upload->do_upload()) {
            $this->data['error'] = $this->upload->display_errors();
            print_r( $this->data['error']);
        } else {
            print_r("success");
        }
    }
}

View

视图

<form role="form">
    <div class="form-group">
        <label for="recipient-name" class="control-label">Blog Title:</label>
        <input type="text" class="form-control" id="recipient-name">
    </div>
    <div class="form-group">
        <label for="message-text" class="control-label">Message:</label>
        <textarea class="form-control" id="message-text"></textarea>
    </div>
    <div class="form-group">
        <label for="message-text" class="control-label">Upload image:</label>
        <img src="<?php echo base_url();?>assest/img/blank.png" alt="Blank image" id="uploadimg" class="img-thumbnail">
        <input style="display:none" id="file" value=" " type="file" class="file" data-show-preview="false">
    </div>
</form>

Response

响应

C:\fakepath\Koala.jpg You did not select a file to upload.

你没有选择要上传的文件。

Please help

请帮助

4 个解决方案

#1

You can to use FormData api in html5.

您可以使用html5中的FormData api。

Your form must be:

表单必须:

<form enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="formname"  method="post" action="">

Then jquery:

jquery:

function uploadImage() {

    if (typeof FormData !== 'undefined') {

        // send the formData
        var formData = new FormData( $("#formID")[0] );

        $.ajax({
            url : baseUrl + 'uploadImage',  // Controller URL
            type : 'POST',
            data : formData,
            async : false,
            cache : false,
            contentType : false,
            processData : false,
            success : function(data) {
                successFunction(data);
            }
        });

    } else {
       message("Your Browser Don't support FormData API! Use IE 10 or Above!");
    }   
}

Then in the controller you will get the files in $_FILES array.

然后在控制器中，您将获得$_FILES数组中的文件。

#2

In the view where you are displaying form:

显示表格的视图:

add attribute: enctype=multipart/form-data

添加属性:enctype =多部分/格式

Or,

或者,

If you are creating a form with form helper:

如果您正在创建一个表单与表单助手:

<?php echo form_open_multipart('blog/uploadimg');?>

#3

You can get seamless functionality if you use this plugin (well written) in javascript.

如果您在javascript中使用这个插件(写得很好)，您可以获得无缝的功能。

http://malsup.com/jquery/form/

To Upload File in PHP

以PHP上传文件

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["file"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["file"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

#4

You can use Ajaxfileupload.js to upload file:

您可以使用Ajaxfileupload。js上传文件:

$('input[type="file"]').ajaxfileupload({
          'action': 'save_photo.php',
          'params': {
            'extra': 'info'
          },
          'onComplete': function(response) {

           console.log('custom handler for file:');
           alert(JSON.stringify(response));

          },
          'onStart': function() {               

          },
          'onCancel': function() {
            console.log('no file selected');
          }
    });

save_photo.php :

save_photo。php:

<?php

print_r($_FILES); // print details about the file which has been uploaded

?>

#1