Codeigniter and ajax jquery file upload

Question

i have this form on my project

<!--START ELEMENT EXAMPLES  -->
<div class="grid_12">

    <div id="tabs">

        <ul>
            <!-- THESE ARE THE CLICKABLE TAB HEADERS -->

            <li><a href="#tabs-1"><?php echo strtoupper($title); ?></a></li>

        </ul>

        <!-- TAB-1 --> 
        <div id="tabs-1">
            <?php echo form_open_multipart('admin/shop/add_product', 'id="add_product"'); ?>
            <p><label>Nama Produk</label><br/>
                <?php
//                echo form_hidden('kode_produk', $kode_produk);
                $data = array('name' => 'nama_produk', 'class' => 'text medium');
                echo form_input($data);
                ?><br/>
<?php echo form_error('nama_produk'); ?>
            </p>
            <p><label>Deskripsi Produk</label><br/>
                <?php
                $data = array('name' => 'deskripsi', 'class' => 'wysiwyg', 'cols' => 75, 'style' => 'height: 400px;');
                echo form_textarea($data);
                ?><br/>
                <?php echo form_error('deskripsi'); ?>
            </p>
            <p><label>Harga</label><br/>
                <?php
                $data = array('name' => 'harga', 'class' => 'text small');
                echo 'Rp. '.form_input($data);
                ?><br/>
<?php echo form_error('harga'); ?>
            </p>
            <p><label>Stok</label><br/>
                <?php
                $data = array('name' => 'stok', 'class' => 'text small');
                echo form_input($data);
                ?><br/>
<?php echo form_error('stok'); ?>
            </p>
            <p><label>Foto Produk</label><br/>
                <?php
                $data = array('name' => 'foto_produk', 'id' => 'foto_produk');
                echo form_upload($data);
                ?><div id="preview"></div><br/>
<?php echo form_error('foto_produk'); ?>
            </p>
            <p><label>Kategori Produk</label><br/>
                <?php
                echo form_dropdown('id_kategori', $categories, '0', 'class="select"');
                ?><br/>
<?php echo form_error('id_kategori'); ?>
            </p>
            <p><label>Tampilkan di Halaman Publik</label><br/>
                <?php
                echo form_radio('status', 1, TRUE).' Ya '.  form_radio('status', 0, FALSE).' Tidak';
                ?><br/>
<?php echo form_error('status'); ?>
            </p>
            <p>
<?php
$data = array('value' => 'Simpan', 'class' => 'submit');
echo form_submit($data);
?>
                &nbsp;
                <input type="button" value="Batal" class="submit special" onclick="window.location.href='<?php echo site_url(); ?>admin/shop/products'" />
            </p>
<?php echo form_close(); ?>
        </div>   
        <!-- END TAB-1 --> 
    </div>
    <!-- END TABS -->


</div>

i want to do is, i wanna upload photo/image from

<p><label>Foto Produk</label><br/>
                <?php
                $data = array('name' => 'foto_produk', 'id' => 'foto_produk');
                echo form_upload($data);
                ?><div id="preview"></div><br/>
<?php echo form_error('foto_produk'); ?>
            </p>

and show uploaded photo thumbnail on with id preview but without save all data to database first. data will be saved to database when i click submit. what plugin should be used? jquery form or jquery upload file or what? and how to implement it?

Cam · Accepted Answer · 2013-01-27 01:42:49Z

3

http://fineuploader.com/

A really clean uploading library with PHP examples.

answered Jan 27, 2013 at 1:42

Cam

9801 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kelaskakap Over a year ago

still dunno how to use it. there is no file fineuploader.js. when i use uploader.js n jquery-plugin.js not work i think

Ray Nicholus Over a year ago

@AganVikry Please have a look at the documentation, and download the combined version.

Freqout · Accepted Answer · 2013-01-28 01:20:26Z

You can use a regular jQuery .ajax call to upload the image and have the server return the path to the uploaded file. Upon successful upload the jQuery code can then call the url for the image and display it. The exchange would essentially be along these lines:

jQuery: upload image CodeIgniter: if upload succeeds, return the url and relative path for the uploaded image - otherwise return an error. jQuery: if successful, call the image based on the returned image location information to display the image and stash the location information in a hidden form field. if failure, display the error information

Upon form submission you can pass that image information so that CodeIgniter can pick it up and do any further processing (thumbnails, moving it out of the uploads directory to a permanent home, etc).

Collectives™ on Stack Overflow

Codeigniter and ajax jquery file upload

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related