CodeIgniter 文件上传错误“您没有选择要上传的文件”使用 Ajax

Question

我已经看到并尝试了一些与此问题类似的答案，但它仍然显示相同的错误。

控制台还给出了错误：Uncaught TypeError: Cannot read property 'length' of undefined at Function.each (jquery-1.10.2.js:631)

我的看法：

<form action="https://dev.vmc.w3.uvm.edu/xana/sensors/deployments" class="basicForm aboutForm form-horizontal" id="deploymentForm" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div class="form-group">
    <label for="fldFileName" class="col-sm-4 control-label">Image</label>
    <div class="col-sm-8">
        <input type="file" name="fldFileName" value="" class="form-control" id="fldFileName"  />
    </div>
  </div>
 <button type="button" class="btn btn-primary" id="newSensorSubmit">Save</button>
</form>

javascript提交表单：

        $(document).on("click", "#newSensorSubmit", function(event){   
            var posturl="<?php echo site_url("sensors/add_deployment");?>";
            var formData = new FormData();

            var fldFileName = $('#fldFileName').val(); 
            formData.append('fldFileName', fldFileName);
            jQuery.ajax({
                url: posturl,
                data: formData,
                cache: false,
                mimeType: "multipart/form-data",
                dataType: 'json',
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data){
                     if(data.status === 'success') {
                         //handle success
                    }
                        else {
                         //handle fail
                        }
                    },
                error: (error) => {
                $('#articleErrorText').html(JSON.stringify(error));
                   }
                });   
        });

控制器：

public function add_deployment(){
    $this->load->helper(array('form', 'url'));
    $this->load->library('upload');
    $config = array(
            'upload_path' => site_url("attachments/project/999/metstations"),
            'allowed_types' => "gif|jpg|png|jpeg",
            'overwrite' => TRUE,
            'max_size' => "16000000" 
            );
    $this->load->library('upload', $config);
        
    if($this->upload->do_upload('fldFileName'))
        {
            $data['image_metadata'] = array('image_metadata' => $this->upload->data());      
        }
        else
        {
            $error = $this->upload->display_errors();
            $data['errors']='<p class="error-message">'.$error.'</p>';
            $data['status']='failure';
            }

}

Answer 1

尝试这个。

要获取所有表单输入，包括type="file"您需要使用FormData object.

要附加参数，只需使用append()方法：

formData.append("param", "value");

在 php 端我抓住了它：

echo $file_name = ($_FILES['file']['name']);

查看代码：-

<body>
        <p id="msg"></p>
        <input type="file" id="file" name="file" />
        <button id="upload">Upload</button>
</body>

jQuery/Ajax 代码：-

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e){
    $('#upload').on('click', function () {
        var file_data = $('#file').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);
        $.ajax({
            url: 'ControllerName/upload_file', // point to server-side controller method
            dataType: 'text', // what to expect back from the server
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function (response) {
                $('#msg').html(response); // display success response from the server
            },
            error: function (response) {
                $('#msg').html(response); // display error response from the server
            }
        });
    });
});
</script>

控制器代码：-

class ControllerName extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

 
    function upload_file() {

        //upload file
        $config['upload_path'] = 'uploads/';
        $config['allowed_types'] = '*';
        $config['max_filename'] = '255';
        $config['encrypt_name'] = TRUE;   // remove it for actual file name.
        $config['max_size'] = '1024'; //1 MB

        if (isset($_FILES['file']['name'])) {
            if (0 < $_FILES['file']['error']) {
                echo 'Error during file upload' . $_FILES['file']['error'];
            } else {
                if (file_exists('uploads/' . $_FILES['file']['name'])) {
                    echo 'File already exists : uploads/' . $_FILES['file']['name'];
                } else {
                    $this->load->library('upload', $config);
                    if (!$this->upload->do_upload('file')) {
                        echo $this->upload->display_errors();
                    } else {
                        echo 'File successfully uploaded : uploads/' . $_FILES['file']['name'];
                    }
                }
            }
        } else {
            echo 'Please choose a file';
        }
    }

}

注意：-有关此检查的更多参考

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

CodeIgniter 文件上传错误“您没有选择要上传的文件”使用 Ajax

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-11-10 19:29:22

CodeIgniter 文件上传错误“您没有选择要上传的文件”使用 Ajax

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-11-10 19:29:22

解决方案1
3 已采纳 2020-11-10 19:29:22