<html>
<head>
<title>文件上传</title>
<link href="jquery.ui.plupload.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui.css" rel="stylesheet" />
<link href="jbox.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="browserplus.min.js"></script>
<script type="text/javascript" src="plupload.full.min.js"></script>
<script type="text/javascript" src="zh_CN.js"></script>
<script type="text/javascript" src="jquery.ui.plupload.js"></script>
<script type="text/javascript" src="jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="jquery.jBox-zh-CN.js"></script>
<script type="text/javascript">
var fileList = [];
$(function () {
$("#uploader").plupload({
runtimes: "html5,flash,silverlight,html4",
url: "/UploadFile/Upload", // 服务端上传路径
max_file_size: "200mb", // 文件上传最大限制。
chunk_size: "200mb", // 上传分块每块的大小，这个值小于服务器最大上传限制的值即可。
// 文件类型限制
filters: [
{ title: "所有文件", extensions: "*" }
],
rename: true,
sortable: true,
dragdrop: true,
views: {
list: true,
thumbs: true,
active: "thumbs"
},
buttons: {
stop: false
},
// Flash文件 的所在路径
flash_swf_url: "~/Content/plupload/js/Moxie.swf",
// silverlight文件所在路径
silverlight_xap_url: "~/Content/plupload/js/Moxie.xap",
multipart: true,
init: {
UploadComplete: function (up, files) {
jBox.tip("上传完成！", "info");
},
FileUploaded: function (up, files, result) {
var data = JSON.parse(result.response);
if (Array.isArray(data)) {
for (var i = 0; i < data.length; i++) {
fileList.push(data[i]);
}
} else {
fileList.push(data);
}
}
}
});
});
var getUploadedFiles = function(callback) {
if (callback) {
callback(fileList);
}
};
var GetList = function () {
return fileList;
}
</script>
<style>
.tip {
font-size: 13px;
color: #ff7f50;
padding: 15px 0;
}
.plupload_file_rename, .plupload_file_namespan {
height: 17px;
font-size: 14px;
font-weight: normal;
}
.plupload_content {
overflow-x: hidden;
}
.plupload_view_thumbs .plupload_file_size {
text-align: center;
}
.plupload_droptext {
color: gray;
}
.jbox-content {
overflow: hidden;
}
.plupload_container, .plupload_header, .plupload_filelist_footer, .plupload_filelist_header {
border-color: #ddd;
}
.plupload_header, .plupload_filelist_header {
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.plupload_filelist_footer {
border-bottom: none;
border-left: none;
border-right: none;
}
.plupload_view_list .plupload_file {
height: 2.7rem !important;
border-left: none !important;
border-right: none !important;
border-top-style: none !important;
}
.plupload_view_list .plupload_file:first-child {
border-top-style: solid !important;
}
.plupload_view_thumbs .plupload_file {
background-color: #fff !important;
}
.plupload_file_rename {
font-size: 0.85rem;
padding: 0;
}
.plupload_view_list .plupload_file_action {
right: 10px !important;
}
.plupload_logo {
width: 22px;
height: 22px;
position: absolute;
top: 17px;
left: 15px;
}
.plupload_header_title {
position: absolute;
top: 10px;
color: #25A6E8;
left: 45px;
}
.plupload_header_text {
left: 142px;
position: absolute;
top: 20px;
color: #999;
}
.plupload_add {
background: #4CAD72 !important;
color: #fff !important;
border-style: none !important;
margin-right: 0.4rem;
}
.plupload_start {
background: #21AAEC !important;
color: #fff !important;
border-style: none !important;
}
.plupload_add .ui-button-text, .plupload_start .ui-button-text {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.plupload_add .ui-icon, .plupload_start .ui-icon {
display: none;
}
</style>
</head>
<body style="padding: 20px">
<div id="uploader">
<p>
你的浏览器没有Flash支持，请安装最新的Flash！
</p>
</div>
<div class="tip">
<p>
提示：单个文件大小不可超过 <b>200</b> M！
</p>
</div>
</body>
</html>
效果图：
网友评论