当前位置: 首页 > 面试题库 >

如何在Codeigniter中使用Ajax上传图像?

冯风史
2023-03-14
问题内容

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

这是我的代码

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);
        },
    });
});

控制者

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");
        }
    }
}

视图

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

响应

C:\ fakepath \ Koala.jpg您没有选择要上传的文件。

请帮忙


问题答案:

您可以在html5中使用FormData API。

您的表格必须是:

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

然后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!");
    }   
}

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



 类似资料:
  • 问题内容: 我喜欢在PHP中使用Codeigniter Framework和JQuery AJAX上传图像,而无需重定向页面。当我上传图像时,它重定向到控制器区域,并且值未插入数据库,ajax响应也不会出现, 任何人都可以解决我的问题吗? 这是我的视野。 这是我的Ajax编码 这是我的控制器编码… 这是我的模型编码 问题答案: 试试这个。 工作正常 -HTML表单- 阿贾克斯- 只需在ajax中设

  • 我试图通过AJAX Laravel(jquery AJAX)发送图像上传。我总是收到空的$_files数组。我在Form中添加了enctype=“multipart/form-data。当我通过Laravel的post方法发送数据时,我得到了我的数据。这不适用于jquery ajax。我得到的是除了$_文件之外我发送的其他东西的ajax响应。

  • 问题内容: 我是在项目中使用代码点火器的新用户,上载多个文件时遇到一个问题,但最后一个仅插入到所有图像“三个图像”字段中。 我的控制器是: 我的观点是: 请帮助如何插入3张图像。 我的资料库 问题答案: HTML: PHP的:

  • 我有麻烦与上传图像使用代码点火。我是新来的,我不知道如何上传图像使用代码点火。所以我希望你们中的任何人能帮我 这是我的表格form_add.php 这是我的控制器,名为crud。php 这是一个名为mymodel的模型。php 这也是我运行后显示的 遇到一个PHP错误 严重性:通知 消息:未定义索引:gambar_produk 文件名:controllers/crud。php 行号: 30 回溯:

  • 问题内容: 我知道,关于这个主题的话题并非没有,但请耐心等待。我想使用Ajax或等效文件将文件上传到服务器。 我猜我配置ajax函数的方式存在问题,因为在调试模式下,除之外的所有数据均会返回。 我做错了什么吗? 问题答案: 回顾过去,较旧的答案不切实际,不建议使用。暂停整个Javascript以仅上传文件, 您可能会在上传过程中触发其他功能 。 如果您仅将JQuery用于,则我建议使用: Axio

  • 问题内容: 我对jQuery和Ajax函数还比较陌生,但是过去几天一直在使用Ajax表单。我在尝试上传图像时遇到文件上传问题。在寻找资源时,我找不到任何有用的东西,因为它们似乎过于复杂,毫无意义,没有任何解释,这无助于我进一步学习。 我已经编写了以下代码来处理Ajax中的图片上传: 这向文件发送了一个请求,但是没有发送数据,基本上我的表单实际上是这样的: 似乎没有任何数据在标头中传递,我认为我将通