jQuery File Upload | Rex's Personal Site

Official: https://blueimp.github.io/jQuery-File-Upload/

Document: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

HTML:

<!-- File Upload -->
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="<?=BASEURL?>assets/plugins/jquery-file-upload/js/jquery.fileupload-process.js"></script>


<div class="gallery_wrap">
	<div class="slide_wrap">
		<ul class="gallery list-left">
			<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
			<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
			<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
			<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
			<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
		</ul>


		<!-- The fileinput-button span is used to style the file input field as button -->
		<span class="btn fileinput-button add_photo">
			<i class="glyphicon glyphicon-plus"></i>
			<!-- The file input field used as target for the file upload widget -->
			<input id="fileupload" type="file" name="files[]" multiple>
		</span>

		<div class="clearfix"></div>
	</div>

	<a href="#" id="post_nav_left" class="carousel_nav left"><span class="glyphicon glyphicon-chevron-left"></span></a>
	<a href="#" id="post_nav_right" class="carousel_nav right"><span class="glyphicon glyphicon-chevron-right"></span></a>

	<!-- The global progress bar -->
	<div id="progress" class="progress">
		<div class="progress-bar progress-bar-success"></div>
	</div>
</div>

</ul>

</span>

</div>

</div>

CSS:

.gallery_wrap{
	position: relative;
}
.gallery {
  list-style: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
.gallery li {
  margin-right: 10px;
}
.gallery li a{
	display: block;
	width: 100px;
	height: 100px;
}
.gallery li a img{
	width: 100%;
	height: 100%;
}
.gallery li a img{
  width: 100%;
  height: 100%;
}

.carousel_nav{
	top: 40px;
	position: absolute;
}
.carousel_nav.left{
	left: 0;
}
.carousel_nav.right{
	left: 305px;
}

.gallery_wrap{

position: relative;

}

.gallery {

list-style: none;

margin: 0px;

padding: 0px;

overflow: hidden;

}

.gallery li {

margin-right: 10px;

}

.gallery li a{

display: block;

width: 100px;

height: 100px;

}

.gallery li a img{

width: 100%;

height: 100%;

}

.gallery li a img{

width: 100%;

height: 100%;

}

.carousel_nav{

top: 40px;

position: absolute;

}

.carousel_nav.left{

left: 0;

}

.carousel_nav.right{

left: 305px;

}

Javascript:

var $carousel = $('.gallery');

$carousel.trigger('destroy');
$carousel.carouFredSel({
  direction: 'left', 
  circular: false,
  infinite: false,
  auto    : false,
  prev    : { 
	button  : "#post_nav_left",
	key     : "left"
  },
  next    : { 
	button  : "#post_nav_right",
	key     : "right"
  }, 
  items:{
	visible: 3
  }
});

var $carousel = $('.gallery');

$carousel.trigger('destroy');

$carousel.carouFredSel({

direction: 'left',

circular: false,

infinite: false,

auto : false,

prev : {

button : "#post_nav_left",

key : "left"

next : {

button : "#post_nav_right",

key : "right"

items:{

visible: 3

}

});

Notes:

widget error:
http://stackoverflow.com/questions/13185613/jquery-file-upload-error-uncaught-typeerror-object-object-has-no-method-o

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31