1

代码如下

查看

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

阿贾克斯代码

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 插入带有上传图片的数据。

请问有什么帮助吗？

4

4 回答 4

0

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

于 2013-08-27T07:15:44.597 回答
0

你仍然可以只使用 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]);”中，将“upload”替换为您的 PHP 控制器变量名

于 2014-05-23T07:40:09.437 回答
0

我为此使用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;
}

PS 我不知道我的解决方案是否足够好，但它对我有用，还请注意 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] );
    }
}
于 2013-08-27T07:52:04.447 回答
-1

需要使用ajax表单上传，可以使用这个插件来获取通过ajax上传的图片。

于 2013-08-27T07:20:55.783 回答