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

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

Вот мой код

JS

$("#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>
 <label for="recipient-name">Blog Title:</label>
 
 </div>
 <div>
 <label for="message-text">Message:</label>
 
 </div>
 <div>
 <label for="message-text">Upload image:</label>
 
 
 </div>
</form>

ответ

C:\fakepath\Koala.jpg Вы не выбрали файл для загрузки.

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

4 ответа

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

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

<form enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="formname" method="post" action="">
<p>Затем jquery:</p>
<pre class="prettyprint linenums">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.


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

$('input[type="file"]').**************({
 '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:


Вы можете получить бесшовную функциональность, если вы используете этот плагин (хорошо написанный) в 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.";
 }
}
?>


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

добавить атрибут: enctype=multipart/form-data

Или

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

licensed under cc by-sa 3.0 with attribution.