Skip to content

jQuery File Upload 6.5 with CodeIgniter 2.1

delsuza edited this page Feb 22, 2012 · 51 revisions

Upload View :

<html>
    <head>
          <link rel="stylesheet" type="text/css" media="screen" href="http://url/assets/css/jquery-ui.css"/>
          
          <script  src="http://code.jquery.com/jquery-1.7.min.js" ></script>
          <script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>


    </head>
<body>

<div id="upload-img">
    <h2>Upload a file</h2>

<!-- Upload function on action form -->
    <form id="fileupload" action="<? echo base_url() . 'upload/upload_img'; ?>" method="POST" enctype="multipart/form-data">

<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="row fileupload-buttonbar">

          <div class="span7">

<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
              <span><i class="icon-plus icon-white"></i> Add files...</span>
              <input type="file" name="userfile" multiple>
           </span>
           <button type="submit" class="btn btn-primary start">
              <i class="icon-upload icon-white"></i> Start upload
          </button>
          <button type="reset" class="btn btn-warning cancel">
              <i class="icon-ban-circle icon-white"></i> Cancel upload
          </button>
          <button type="button" class="btn btn-danger delete">
               <i class="icon-trash icon-white"></i> Delete
          </button>
          <input type="checkbox" class="toggle">
       </div>
       <div class="span5">

 <!-- The global progress bar -->
       <div class="progress progress-success progress-striped active fade">
             <div class="bar" style="width:0%;"></div>
      </div>
    </div>
  </div>
<!-- The loading indicator is shown during image processing -->
   <div class="fileupload-loading"></div>
        <br>
<!-- The table listing the files available for upload/download -->
        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
   </form>
</div>

<!-- The template text-tmpl upload/download -->


...
...



</body>
</html>

Clone this wiki locally