Skip to content

Instantly share code, notes, and snippets.

@longkai

longkai/upload.html

Created August 16, 2013 15:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save longkai/6250925 to your computer and use it in GitHub Desktop.
Save longkai/6250925 to your computer and use it in GitHub Desktop.
Download ZIP
fine uploader with jquery and bootstrap.
Raw
upload.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader - jQuery Wrapper Minimal Demo</title>
<link href="http://cdn.staticfile.org/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"
media="" />
<link href="/resources/libs/fineuploader/3.7.1/fineuploader-3.7.1.min.css" rel="stylesheet">
<style type="text/css">
.span12 {
margin: 0 0 10px 0;
}
.qq-upload-button {
background-color: #62c462;
}
</style>
</head>
<body>
<div class="container">
<div id="jquery-wrapped-fine-uploader"></div>
<noscript>
<p>Please enable JavaScript to use Fine Uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
</div>
<div class="container">
<button id="triggerUpload" class="btn btn-info span12">
<i class="icon-upload icon-white"></i> 上传!
</button>
<div id="alert"></div>
</div>
<script src="//libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="/resources/libs/fineuploader/3.7.1/jquery.fineuploader-3.7.1.min.js"></script>
<script>
$(function () {
$('#jquery-wrapped-fine-uploader').fineUploader({
debug: true,
autoUpload: false,
request: {
inputName: 'file',
endpoint: '/upload'
},
validation: {
itemLimit: 3,
allowedExtensions: ['jpeg', 'jpg', 'png', 'txt'],
sizeLimit: 512000 // 50 kB = 50 * 1024 bytes
},
editFilename: {
enabled: true
},
text: {
uploadButton: '<i class="icon-upload icon-white"></i> 请选择文件或者将文件拖放到此处'
},
template:
'<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
},
showMessage: function (message) {
// Using Bootstrap's classes
$('#alert').append('<div class="alert alert-error lead">' + message + '</div>');
}
});
})
$('#triggerUpload').click(function () {
$('#jquery-wrapped-fine-uploader').fineUploader('uploadStoredFiles');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment