<!DOCTYPE html>
<html>
<head>
<title>图片上传示例</title>
<!-- 引入js和css文件 -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="webuploader/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"/>
<script>
// 图片上传demo
jQuery(function() {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// Web Uploader实例
uploader;
// 初始化Web Uploader
uploader = WebUploader.create({
// 自动上传。
auto: false,
// swf文件路径
swf:'webuploader/Uploader.swf',
// 文件接收服务端。
server: 'http://localhost:8080/webuploader/uploadServlet',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 只允许选择文件，可选。
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
//注意我写样式了啊response:服务端返回的数据
uploader.on( 'uploadSuccess', function( file,response) {
});
// 文件上传失败
uploader.on( 'uploadError', function(file) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
alert(reson);
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败!');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
});
uploader.on( 'filesQueued', function( files ) {
alert(files.length);
});
$('#submitBtn').on( 'click', function() {
alert(uploader.getFiles().length);
});
});
</script>
</head>
<body>
<h3>图片上传示例</h3>
<!--dom结构部分-->
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="upInfo"></div>
<div id="filePicker">选择图片</div>
</div>
<div id="submitBtn">上传图片</div>
</body>
</html>
<html>
<head>
<title>图片上传示例</title>
<!-- 引入js和css文件 -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="webuploader/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"/>
<script>
// 图片上传demo
jQuery(function() {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// Web Uploader实例
uploader;
// 初始化Web Uploader
uploader = WebUploader.create({
// 自动上传。
auto: false,
// swf文件路径
swf:'webuploader/Uploader.swf',
// 文件接收服务端。
server: 'http://localhost:8080/webuploader/uploadServlet',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 只允许选择文件，可选。
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
//注意我写样式了啊response:服务端返回的数据
uploader.on( 'uploadSuccess', function( file,response) {
});
// 文件上传失败
uploader.on( 'uploadError', function(file) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
alert(reson);
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败!');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
});
uploader.on( 'filesQueued', function( files ) {
alert(files.length);
});
$('#submitBtn').on( 'click', function() {
alert(uploader.getFiles().length);
});
});
</script>
</head>
<body>
<h3>图片上传示例</h3>
<!--dom结构部分-->
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="upInfo"></div>
<div id="filePicker">选择图片</div>
</div>
<div id="submitBtn">上传图片</div>
</body>
</html>
7028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
