如何在codeigniter中使用ajax上傳圖片？

Question

我試圖上傳圖像與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 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 You did not select a file to upload.

請幫

Answer 1

您可以使用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陣列的文件。

Answer 2

在視圖在您展示形式：

附加屬性：enctype=multipart/form-data

或者，

如果要創建與表單輔助形式：

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

Answer 3

，如果你在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."; 
    } 
} 
?> 

Answer 4

您可以使用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 

?>