Scribd Logo
Importer

Bienvenue sur Scribd !

  • Ajax File Upload

    Transféré par

    ONLY
    90 vues3 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    90 vues3 pages

    Ajax File Upload

    Transféré par

    ONLY

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Ajax File Upload (CodeIgniter dan JQuery)

    Sep 27, 2009 // by anggie // Ajax, CodeIgniter // 40 Comments Setelah sekian lama pending, alhamdulillah saya ada waktu sedikit untuk menulis artikel sederhana ini. Kebetulan kemarin saya chatting dengan teman dan dia memberikan ide untuk menulis artikel tentang upload file dengan Ajax. Walaupun sebenarnya saya juga bingung, tetapi akhirnya saya berhasil membuatnya, memodifikasi, :D berawal dari sebuah artikel di sini. Langsung saja saya berikan langkah-langkah dan penjelasan semampu saya. Sebenarnya, pembuatan controller dan view untuk halaman upload ini tidaklah berbeda jauh dengan panduan di user guide CodeIgniter. Penambahan yang diberikan adalah pada proses uploadnya. Kita tambahkan fungsi javascript yang akan dieksekusi ketika button upload ditekan. Kita buat form upload (upload_form.php) terlebih dahulu.
    if ( ! defined('BASEPATH')) exit('No direct script access allowed');?> <html> <head> <title>JQuery - CodeIgniter File Upload Demo</title> <link href="<?php echo base_url()?>asset/style/ajaxfileupload.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="<?php echo base_url()? >asset/js/jquery.js"></script> <script type="text/javascript" src="<?php echo base_url()? >asset/js/ajaxfileupload.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $("#loading") .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }); $.ajaxFileUpload ( { url:'<?php echo site_url()? >/upload/do_upload', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, status) { if(typeof(data.error) != 'undefined') { if(data.error != '') { $ ("#info").html(data.error); }else { $ ("#info").html(data.msg);

    } ) return false;

    }, error: function (data, status, e) { $("#info").html(e); }

    } </script> </head> <body> <div id="wrapper"> <div id="content"> <h1>JQuery - CodeIgniter File Upload Demo</h1> <p>Upload file using CodeIgniter File Uploading Class and JQuery</p> <p> Need any Web-based Information System?<br> Please <a href="http://www.putraweb.net/about">Contact Us</a><br> <form name="form" action="" method="POST" enctype="multipart/form-data"> <table cellpadding="0" cellspacing="0" class="tableForm"> <thead> <tr> <th>Please select a file and click Upload button</th> </tr> </thead> <tbody> <tr> <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr> </tbody> <tfoot> <tr> <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td> </tr> </tfoot> </table> </form> <img id="loading" src="<?php echo base_url()? >asset/images/loading.gif" style="display:none;"> <div id="info"></div> </div> </body> </html>

    Perbedaan yang tampak adalah adanya beberapa file .js dan satu fungsi javascript yang ditambahkan. Sekarang kita buat controller
    class Upload extends Controller { function Upload() { parent::Controller(); } function index()

    $this->load->view('upload_form'); } function do_upload() { $error = ""; $msg = ""; $config['upload_path'] = './upload/'; $config['allowed_types'] = 'doc|xls|ppt|pdf|rar|zip'; $config['max_size'] = '1000'; $this->load->library('upload', $config); $this->upload->display_errors('',''); if ( ! $this->upload->do_upload("fileToUpload")) { $error = $this->upload->display_errors(); } else { $msg = "File berhasil diupload"; } echo "{"; echo "error: '" . $error . "',n"; echo "msg: '" . $msg . "'n"; echo "}";

    } }

    Jangan lupa untuk membuat folder upload dalam direktori yang sama dengan index.php. Terlihat mudah bukan?Silakan dicoba. Anda juga dapat mendownload paket file lengkapnya disini (pass:putraweb.net) .

    Vous aimerez peut-être aussi