Как я могу загрузить изображение с помощью ajax в codeigniter?

Я пытаюсь загрузить изображение с помощью функции jQuery и ajax и как я могу получить всю информацию о файле изображения, например, в php мы используем $_FILE()

Вот мой код

 $("#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 Вы не выбрали файл для загрузки.

Пожалуйста помоги

Solutions Collecting From Web of "Как я могу загрузить изображение с помощью ajax в codeigniter?"

Вы можете использовать FormData api в html5.

Ваша форма должна быть:

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

В представлении, где вы показываете форму:

add attribute: enctype=multipart/form-data

Или,

Если вы создаете форму с помощью хелпера формы:

 <?php echo form_open_multipart('blog/uploadimg');?>

Вы можете получить бесшовную функциональность, если используете этот плагин (хорошо написанный) в javascript.

http://malsup.com/jquery/form/

Загрузить файл в PHP

 <?php $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["file"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check = getimagesize($_FILES["file"]["tmp_name"]); if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } } // Check if file already exists if (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0; } // Check file size if ($_FILES["file"]["size"] > 500000) { echo "Sorry, your file is too large."; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) { echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded."; } else { echo "Sorry, there was an error uploading your file."; } } ?>

Вы можете использовать Ajaxfileupload.js для загрузки файла:

 $('input[type="file"]').ajaxfileupload({ 'action': 'save_photo.php', 'params': { 'extra': 'info' }, 'onComplete': function(response) { console.log('custom handler for file:'); alert(JSON.stringify(response)); }, 'onStart': function() { }, 'onCancel': function() { console.log('no file selected'); } });

save_photo.php:

 <?php print_r($_FILES); // print details about the file which has been uploaded ?>