如何在codeigniter中使用ajax上传图像? [英] How can i upload image with ajax in codeigniter?

问题描述

我正在尝试使用 jQuery 和 ajax 函数上传图像，以及如何获取图像文件的所有详细信息，例如在 php 中我们使用 $_FILE()

这是我的代码

JS

$("#uploadimg" ).click(function() {$( "#file" ).click();});$( "#file" ).change(function(e) {var file=$('#file').val();警报(文件)；死();e.preventDefault();$.ajax({url:'http://localhost/JSG/blog/uploadimg',安全:假，类型:POST"，fileElementId:'图像',数据类型:'文本'，数据:{文件:文件}，缓存:真实，成功:功能(数据){警报(数据)；控制台日志(数据)；},});});

控制器

公共函数uploadimg(){$var = $_POST['file'];打印_r($var);if($this->input->post('file')) {$config['upload_path'] = '上传';$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']);} 别的 {print_r("成功");}}}

查看

<div class="form-group"><label for="recipient-name" class="control-label">博客标题:</label><input type="text" class="form-control" id="recipient-name">

<div class="form-group"><label for="message-text" class="control-label">Message:</label><textarea class="form-control" id="message-text"></textarea>

<div class="form-group"><label for="message-text" class="control-label">上传图片:</label><img src="<?php echo base_url();?>assest/img/blank.png" alt="空白图片" id="uploadimg" class="img-thumbnail"><input style="display:none" id="file" value="" type="file" class="file" data-show-preview="false">

</表单>

回复

<块引用>

C:fakepathKoala.jpg 您没有选择要上传的文件.

请帮忙

解决方案

您可以在 html5 中使用 FormData api.

您的表单必须是:

然后是jquery:

function uploadImage() {if (typeof FormData !== 'undefined') {//发送表单数据var formData = new FormData( $("#formID")[0] );$.ajax({url : baseUrl + 'uploadImage',//控制器 URL类型:'POST'，数据:表单数据，异步:假，缓存:假，内容类型:假，过程数据:假，成功:功能(数据){成功功能(数据)；}});} 别的 {message("您的浏览器不支持 FormData API！使用 IE 10 或更高版本！");}}

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

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()

Here is my code

JS

$("#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:fakepathKoala.jpg You did not select a file to upload.

Please help

解决方案

You can to use FormData api in html5.

Your form must be:

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

Then 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.

这篇关于如何在codeigniter中使用ajax上传图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！