2012-07-19 3 views
1

codeigniter와 ajax를 사용하여 이미지를 업로드하려고합니다. DB에 필드 값을 삽입하는 아약스 메서드가 이미 있는데, 파일을 업로드하는 가장 쉽고 간단한 방법은 무엇입니까?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); 

내가 같이 호출 : 다음은 JQuery와 사용자 정의 함수의

$(document).ready(function() {  
    $('#myForm').ajaxSubmit(); 
}); 
기능은 잘 작동

는, 데이터가 데이터베이스에 삽입됩니다 나는 심지어에서 만든 얻을 일부 디렉토리를 이미지를 업로드하기 전에 모델을 만들었지 만 이미지는 전혀 업로드되지 않습니다.

나는 숨겨진 Iframe을 사용하여 작업을 수행해야한다는 것을 알고 있지만 코드에 통합하는 방법을 잘 모른다.

+0

이 링크를 발견했습니다 : https://github.com/johnlanz/jquery-fileuploader-codeigniter codeigniter 컨트롤러 및 모델에서 아무것도 변경하지 않고 파일 업로드를 수행하는 라이브러리가 포함되어 있습니다. – Sarah

답변

12

나는 CodeIgniter, jQuery 및 Malsup 양식 플러그인을 사용하여 Ajax 파일 업 로더을 만들었습니다. 다음은 HTML과 Javascript/CSS 코드입니다. 또한 여러 파일 업로드 및 진행을 지원합니다. CodeIgniter는 컨트롤러에서

<!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"; 
       } 
      } 
     } 
    } 

} 

희망. 감사!!

+0

멋지다. 아프다. – Sarah

+3

멋지지만'ajaxForm'이 작동하지 않는 것 같아요. 'e.preventDefault()'대신'ajaxSubmit'을 사용했습니다. 나머지는 천재입니다 – cjds

+0

그리고 형태로'beforeSubmit'와'success' – cjds