<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>
效果圖：
