Question

我正在存储模态输入中的一些数据。一切正常，但是在这种情况下，当我使用文件类型数据时，我正在拍摄一个图像，该图像将存储在服务器文件夹中，并且其位置也将存储在数据库中。

我检查用户是否要添加数据
然后通过ajax将数据推送到控制器的相应方法
在那里，我将图像存储在选定的文件夹中并重新获取图像的位置，然后将所有数据推入模型以将其存储在数据库中。代码：

模式：

<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Blog Form</h3>
        </div>
        <div class="modal-body form">
            <form id="form" class="form-horizontal" method='post' action='' enctype="multipart/form-data>
                <input type="hidden" value="" name="id"/>
                <div class="form-body">
                    <div class="form-group">
                        <label class="control-label col-md-3">Author Name</label>
                        <div class="col-md-9">
                            <input name="author" placeholder="author" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Blog Title</label>
                        <div class="col-md-9">
                            <input name="title" placeholder="title" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Blog Category</label>
                        <div class="col-md-9">
                            <input name="tag" placeholder="tag" class="form-control" type="text">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Blog Details</label>
                        <div class="col-md-9">
                            <input name="details" placeholder="details" class="form-control" type="text">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Blog Picture</label>
                        <div class="col-md-9">
                            <input name="picture" id="picture" placeholder="Add a photo" type="file">

                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

在脚本中保存功能

function save()
{
    var url;
    if(save_method == 'add')
    {
        url = "<?php echo site_url('index.php/admin/blog_add')?>";
    }
    else
    {
        url = "<?php echo site_url('index.php/admin/blog_update')?>";
    }
    $.ajax({
        url : url,
        type: "POST",
        data: $('#form').serialize(),
        dataType: "JSON",
        success: function(data)
        {
            //if success close modal and reload ajax table
            $('#modal_form').modal('hide');
            location.reload();// for reload a page
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update data');
        }
    });
}

管理控制器中的Blog_add方法：

public function blog_add(){
$picture_name = $this->store_photo_return_photo_location();
$data = array(
    'author' => $this->input->post('author'),
    'title' => $this->input->post('title'),
    'details' => $this->input->post('details'),
    'tag' => $this->input->post('tag'),
    'picture' => $picture_name,
);
$insert = $this->admin_model->blog_add($data);
echo json_encode(array("status" => TRUE));}

store_photo_return_photo_location函数：

public function store_photo_return_photo_location(){
    $filename = $_FILES['picture']['name'];
    // Location
    $location = 'assets/images/'.$filename;
    // file extension
    $file_extension = pathinfo($location, PATHINFO_EXTENSION);
    $file_extension = strtolower($file_extension);
    // Valid image extensions
    $image_ext = array("jpg","png","jpeg","gif");
    $response = 0;
    if(in_array($file_extension,$image_ext)){
        // Upload file
        if(move_uploaded_file($_FILES['picture']['tmp_name'],$location)){
            $response = $location;
        }
    }
    return $response;}

型号：

public function blog_add($data)
{
    $this->db->insert($this->table, $data);
    return $this->db->insert_id();
}

直到我处理没有图像的数据，它都可以正常工作，但是当我处理图像时，它就不能工作。

我认为通过ajax推送图像名称无效。

预先感谢

Answer 1

您正在调用此函数来上传图片，但没有将“发布”数据传递给该函数

$this->store_photo_return_photo_location();

这样称呼

$image = $this->input->post['picture'];
$this->store_photo_return_photo_location($image);

并修改您的功能

public function store_photo_return_photo_location($image) {
  //..your code
}

Answer 2

javascript的serialize()函数将无法从html表单中获取文件。您应该改用FormData()

data: new FormData($('#form')),

还在您的store_photo_return_photo_location()函数中，在继续上传之前验证文件是否确实存在

if(!empty($_FILES['picture']['name'])){
   //proceed
}

Answer 3

通过ajax上传文件有另一种方法。请检查以下内容：https://stackoverflow.com/a/2320097/10412708

一种更简单的方法是将提交URL放入表单的操作中，然后让表单提交并刷新页面。无论如何，您的JS成功加载页面后，为什么还要使用ajax？如果可能，请尝试使用PHP对提交的URL进行预处理。

从模式输入将图像存储在服务器中不起作用

3 个答案: