<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<html lang="en">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
<title>WebUploader演示</title>
|
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
<link href="/css/font-awesome.min.css" rel="stylesheet">
|
<link href="/css/animate.min.css" rel="stylesheet">
|
<link href="/js/plugins/layer/skin/layer.css" rel="stylesheet">
|
<link rel="stylesheet" type="text/css" href="/js/plugins/webuploader/webuploader.css" />
|
<link rel="stylesheet" type="text/css" href="/js/plugins/webuploader/style.css" />
|
<link href="/css/style.min.css" rel="stylesheet" />
|
</head>
|
<body>
|
<div id="wrapper">
|
<div id="container">
|
<p>先点击【点击选择文件】，然后再点击【开始上传】，文件全部上传完后点击【确定完成】</p>
|
<div id="uploader">
|
<div class="queueList">
|
<div id="dndArea" class="placeholder">
|
<div id="filePicker"></div>
|
</div>
|
</div>
|
<div class="statusBar" style="display:none;">
|
<div class="progress">
|
<span class="text">0%</span>
|
<span class="percentage"></span>
|
</div><div class="info"></div>
|
<div class="btns">
|
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
|
<script language="javascript" src="/js/plugins/layer/layer.js" type="text/javascript"></script>
|
<script src="/js/plugins/toastr/toastr.min.js" type="text/javascript"></script>
|
<script type="text/javascript" src="/js/common-layout.js"></script>
|
<script type="text/javascript" src="/js/plugins/webuploader/webuploader.js"></script>
|
<script type="text/javascript">
|
var filelist = '';
|
function dlogBtnYes() {
|
if (filelist == '') {
|
msg.err("请上传文件");
|
}
|
return '[' + filelist.substring(0, filelist.length - 1) + ']';
|
}
|
</script>
|
<script type="text/javascript" src="/js/plugins/webuploader/upload.js"></script>
|
<!--<script type="text/javascript">
|
var filelist = '';
|
$(function () {
|
var $ = jQuery,
|
$list = $('#fileList'),
|
// 优化retina, 在retina下这个值是2
|
ratio = window.devicePixelRatio || 1,
|
// 缩略图大小
|
thumbnailWidth = 90 * ratio,
|
thumbnailHeight = 90 * ratio,
|
// Web Uploader实例
|
uploader;
|
uploader = WebUploader.create({
|
// 选完文件后，是否自动上传。
|
auto: false,
|
|
// swf文件路径
|
swf: '/js/plugins/webuploader/Uploader.swf',
|
|
// 文件接收服务端。
|
server: '/WorkFlow/UpLoadProcess',
|
|
// 选择文件的按钮。可选。
|
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
|
pick: {
|
id: '#filePicker',
|
label: '点击选择图片'
|
},
|
|
//只允许选择图片
|
//accept: {
|
// title: '文件',
|
// extensions: 'png,jpg,jpeg,gif,bmp,doc,docx,xls,xlsx,ppt,pptx,pdf,txt',
|
// mimeTypes: '*/*'
|
//}
|
});
|
|
// 当有文件添加进来的时候
|
uploader.on('fileQueued', function (file) {
|
var $li = $(
|
'<div id="' + file.id + '" class="cp_img">' +
|
'<img>' +
|
'<div class="cp_img_jian"></div></div>'
|
),
|
$img = $li.find('img');
|
|
|
// $list为容器jQuery实例
|
$list.append($li);
|
|
// 创建缩略图
|
// 如果为非图片文件，可以不用调用此方法。
|
// thumbnailWidth x thumbnailHeight 为 100 x 100
|
uploader.makeThumb(file, function (error, src) {
|
if (error) {
|
$img.replaceWith('<span>不能预览</span>');
|
return;
|
}
|
|
$img.attr('src', src);
|
}, thumbnailWidth, thumbnailHeight);
|
});
|
|
// 文件上传过程中创建进度条实时显示。
|
uploader.on('uploadProgress', function (file, percentage) {
|
var $li = $('#' + file.id),
|
$percent = $li.find('.progress span');
|
|
// 避免重复创建
|
if (!$percent.length) {
|
$percent = $('<p class="progress"><span></span></p>')
|
.appendTo($li)
|
.find('span');
|
}
|
|
$percent.css('width', percentage * 100 + '%');
|
});
|
|
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
|
uploader.on('uploadSuccess', function (file, response) {
|
filelist += '{code:' + response.filePath + ',lable:' + response.filename + '},';
|
$('#' + file.id).addClass('upload-state-done');
|
});
|
|
// 文件上传失败，显示上传出错。
|
uploader.on('uploadError', function (file) {
|
var $li = $('#' + file.id),
|
$error = $li.find('div.error');
|
|
// 避免重复创建
|
if (!$error.length) {
|
$error = $('<div class="error"></div>').appendTo($li);
|
}
|
|
$error.text('上传失败');
|
});
|
|
// 完成上传完了，成功或者失败，先删除进度条。
|
uploader.on('uploadComplete', function (file) {
|
$('#' + file.id).find('.progress').remove();
|
});
|
|
//所有文件上传完毕
|
uploader.on("uploadFinished", function ()
|
{
|
//提交表单
|
|
});
|
|
//开始上传
|
$("#ctlBtn").click(function () {
|
uploader.upload();
|
|
});
|
|
////显示删除按钮
|
//$(".cp_img").live("mouseover", function ()
|
//{
|
// $(this).children(".cp_img_jian").css('display', 'block');
|
|
//});
|
////隐藏删除按钮
|
//$(".cp_img").live("mouseout", function () {
|
// $(this).children(".cp_img_jian").css('display', 'none');
|
|
//});
|
//执行删除方法
|
$list.on("click", ".cp_img_jian", function ()
|
{
|
var Id = $(this).parent().attr("id");
|
uploader.removeFile(uploader.getFile(Id,true));
|
$(this).parent().remove();
|
});
|
|
});
|
function dlogBtnYes() {
|
return '[' + filelist.substring(0, filelist.length - 1) + ']';
|
}
|
|
</script>-->
|
</body>
|
</html>
|
