使用Codeigniter上傳Ajax文件

我正嘗試使用codeigniter和ajax上傳圖像。我已經有了將字段值插入數據庫的ajax方法，上傳文件的最簡單方法是什麼。這裏的JQuery的自定義函數：使用Codeigniter上傳Ajax文件

(function($){ 
    jQuery.fn.ajaxSubmit = 
     function() { 
      $(this).submit(function(event) { 
       event.preventDefault(); 
       var url = $(this).attr('action');      
       var data = $(this).serialize(); 

       $.ajax({ 
        url: url, 
        type: "POST", 
        data: data, 
        dataType: "html", 
        success: function(msg) { 
           $('#main').html(msg); 
          } 
         }); 

       return this; 
      }); 
     }; 
})(jQuery);

我這樣稱呼它：

$(document).ready(function() {  
    $('#myForm').ajaxSubmit(); 
});

功能工作正常，數據被插入到數據庫中，我甚至有獲得所創建的一些目錄模型在上傳圖像之前會創建，但圖像根本沒有上傳。

我知道我需要使用一個隱藏的iframe來完成這項工作，但我不知道如何將它集成到我的代碼中。

來源

2012-07-19 Sarah

我發現這個鏈接：https：//github.com/johnlanz/jquery-fileuploader-codeigniter 它包含一個庫，執行文件上傳而不改變代碼控制器和模型中的任何東西。 – Sarah 2012-07-21 07:02:26

我創建了自定義使用CodeIgniter，jQuery和Malsup表單插件的Ajax文件上傳器。這是HTML和Javascript/CSS代碼。它也支持多文件上傳和進度。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Ajax UP Bar</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('form').submit(function() { 
        var bar = $('.bar'); 
        var percent = $('.percent'); 
        var status = $('#status'); 
        $(this).ajaxForm({ 
         beforeSend: function() { 
          status.html(); 
          var percentVal = '0%'; 
          bar.width(percentVal) 
          percent.html(percentVal); 
         }, 
         uploadProgress: function(event, position, total, percentComplete) { 
          var percentVal = percentComplete + '%'; 
          bar.width(percentVal) 
          percent.html(percentVal); 
         }, 
         complete: function(xhr) { 
          status.html(xhr.responseText); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 

     <form method="post" action="<?php echo base_url('users/upload/'); ?>" enctype="multipart/form-data"> 
      <label for="upload">Select : </label> 
      <input type="file" name="upload[]" id="upload" multiple="multiple" /> 
      <input type="submit" name="fsubmit" id="fsubmit" value="Upload" /> 
     </form> 

     <div class="progress"> 
      <div class="bar"></div > 
      <div class="percent">0%</div > 
     </div> 

     <div id="status"></div> 

    </body> 
</html> 
<style> 
    body { padding: 30px } 
    form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 

    .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 
    .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } 
    .percent { position:absolute; display:inline-block; top:3px; left:48%; } 
</style>

在笨控制器：

<?php 

if (!defined('BASEPATH')) 
    exit('No direct script access allowed'); 

class Users extends CI_Controller 
{ 

    public function __construct() 
    { 
     parent::__construct(); 
    } 

    public function upload() 
    { 
     if (isset($_FILES['upload']['name'])) { 
      // total files // 
      $count = count($_FILES['upload']['name']); 
      // all uploads // 
      $uploads = $_FILES['upload']; 

      for ($i = 0; $i < $count; $i++) { 
       if ($uploads['error'][$i] == 0) { 
        move_uploaded_file($uploads['tmp_name'][$i], 'storage/' . $uploads['name'][$i]); 
        echo $uploads['name'][$i] . "\n"; 
       } 
      } 
     } 
    } 

}

希望這有助於你。謝謝！！

來源

2012-07-19 09:04:03

看起來不錯，生病了試試看。 – Sarah 2012-07-19 09:38:26

不錯，但'ajaxForm'似乎沒有工作我用'ajaxSubmit'而不是'e.preventDefault（）'。剩下的就是天才 – cjds 2013-02-10 12:51:59

在形式上它的'beforeSubmit'和'success' – cjds 2013-02-10 12:54:05

使用Codeigniter上傳Ajax文件

回答

相關問題