Question

代码如下：

For View

<input type="text" name="name" id="name" class="input_field" />    
<input type="file" name="userfile" id='img_upload' />

Ajax代码

dataString = $("#student_info_form").serialize();
$.ajax ({
    type    : "POST",
    url     : "<?php echo base_url();?>sms_con/add_student_info",
    data    : dataString,
    cache   : false,
    success : function(data){

    }
});
return false;

控制器代码

$config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '800';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload("userfile"))
        {
            $error = array('error' => $this->upload->display_errors());
            print_r($error);
        }
        else
        {
            $data = array('upload_data' => $this->upload->data());
            $img =  $data ['upload_data']['file_name'];
            $data = $this->sms_model->add_student_info($img);
        }

但是当我提交表格时，我可以看到错误消息“您没有选择要上传的文件”;

如何通过ajax插入带有上传图片的数据。

请帮忙吗？

Answer 1

你不能上传这样的图片，使用this插件通过ajax上传图片。

Answer 2

我正在使用ajaxfileupload插件

HTML：

    <form method="post" action="" id="company_logo">
        <input type="file" class="clsField" name="company_image" id="company_image"/>
        <input type="submit" name="submit" id="submit" />
    </form>

<强> JS：

        $('#company_logo').submit(function(e) {
        e.preventDefault();
        $.ajaxFileUpload({
            url         : '../users/uploadFile',
            secureuri      :false,
            fileElementId  :'company_image',
            dataType: 'json',
            data:  {'name' : 'company-avatar'},
            success  : function (data, status)
            {
                // You have link to image inside data.file
            }
        });
        return false;
        });

<强>控制器：

/**
 * uploadFile - ajax response function for file upload
 * @param none - gets post
 * @return file url
 **/
public function uploadFile() {
    $input = $this->input->get_post('name');
    if($input) {
        if($input == 'company-avatar') {
            echo json_encode(array('file' => $this->***_users_model->uploadFile($_FILES['company_image'])));
        }
    }
}

<强>模型：

/**
 * uploadFile
 * @param $file - $_FILES array, $type - type of file to upload
 * @return path to file
 **/
public function uploadFile($file, $type = 'images') {
    $username = $this->session->userdata('username');
    $fileName = $file['name'];
    $fileData = $file['tmp_name'];
    if(empty($file['name']) || empty($file['tmp_name'])) {
        return;
    }

    $fileDir = "your path";
    $fileDir .= "/$type";

    $filePath = "$fileDir/$fileName";

    //Creating dir if doesn't exists.
    if (!file_exists($fileDir)) {
        mkdir($fileDir, 0777, true);
    }
    move_uploaded_file($fileData, $filePath);

    return $filePath;
}

P.S。我不知道我的解决方案是否足够好，但它对我有用，请注意ajaxFileUpload使用了不推荐使用的jQuery handleError，因此你应该添加这个函数：

 handleError: function( s, xhr, status, e ) {
    // If a local callback was specified, fire it
    if ( s.error ) {
        s.error.call( s.context || window, xhr, status, e );
    }

    // Fire the global callback
    if ( s.global ) {
        (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    }
}

Answer 3

你仍然可以只使用ajax，这就足够了。但你必须在表格数据中正确附加图像。

因为“.serialize（）”方法使用标准的URL编码表示法创建文本字符串，而不是MIME数据。

<input type="file" id="uploadfile" name="uploadfile" />
<input type="button" value="upload" onclick="upload()" />

我希望，这会有用

<script>
   var client = new XMLHttpRequest();

   function upload() 
   {
      var file = document.getElementById("uploadfile");

      /* Create a FormData instance */
      var formData = new FormData();
      /* Add the file */ 
      formData.append("upload", file.files[0]);

      client.open("post", "/upload", true);
      client.setRequestHeader("Content-Type", "multipart/form-data");
      client.send(formData);  /* Send to server */ 
   }

   /* Check the response status */  
   client.onreadystatechange = function() 
   {
      if (client.readyState == 4 && client.status == 200) 
      {
         alert(client.statusText);
      }
   }
</script>

在此代码中“formData.append（”upload“，file.files [0]）;”，用您的PHP控制器变量名替换“upload”

Answer 4

您需要使用ajax表单上传，您可以使用this plugin来获取通过ajax上传的图片。

在ajax和codeigniter中插入带有上传图像的数据

4 个答案: