先做一個上傳界面：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"
<link href="~/Content/bootstrap.min.css" rel="stylesheet"
<link rel="stylesheet" href="~/Content/css/wu.css"
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/Scripts/webuploader/webuploader.css">
<script type="text/javascript" src="~/Scripts/webuploader/webuploader.js"></script>
<style>.wu-example {
position: relative;
padding:15px;
margin:15px 0;
/*background-color: #fafafa;*/
/*box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);*/
/*border-color: #e5e5e5 #eee #eee;*/
/*border-style: solid;*/
/*border-width: 1px 0;*/
}
#picker {
display: inline-block;
line-height:1.428571429;
vertical-align: middle;
margin:0 12px 0 0;
}
#picker .webuploader-pick {
padding:6px 12px;
display: block;
}</style>
<script>var upType;
var upFileUrl;
$(document).ready(function ()
window.parent.setUploadIframeId(window.frameElement.id);
var GUID = WebUploader.Base.guid();
var uploader = WebUploader.create({
// swf檔案路徑
swf: '/scripts/webuploader/Uploader.swf',
// 檔案接收服務端。
server: '/frame/UpFile',
// 選擇檔案的按鈕。可選。
// 内部根據目前運作是建立，可能是input元素，也可能是flash.
pick: '#picker',
//禁用拖拽上傳
disableGlobalDnd: true,
// 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
resize: false,
//分片
chunked: true,
//每片大小 2M
chunkSize: 2097152,
//單片失敗後重試次數
chunkRetry: 5,
//上傳并發線程數
threads: 1,
//可上傳檔案數量
fileNumLimit: 1,
//圖檔上傳之前不壓縮
compress: false,
formData: { guid: GUID, upType: upType }
});
// 當有檔案被添加進隊列的時候
uploader.on('fileQueued', function (file)
$('#thelist').append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上傳...</p>' +
'</div>');
});
// 檔案上傳過程中建立進度條實時顯示。
uploader.on('uploadProgress', function (file, percentage)
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重複建立
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上傳中');
$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file, response)
if (response.success) {
upFileUrl = response.data;
$('#' + file.id).find('p.state').html('已上傳:<a href=/frame/getfile?url=' + upFileUrl + ' target=_blank>' + upFileUrl + '</a>');
}
});
uploader.on('uploadError', function (file)
$('#' + file.id).find('p.state').text('上傳出錯');
});
uploader.on('uploadComplete', function (file)
$('#' + file.id).find('.progress').fadeOut();
});
$('#ctlBtn').on('click', function ()
uploader.upload();
});
$('#btnReset').on('click', function ()
uploader.reset();
$('#thelist').html('');
});
})
function setUpType(type)
upType = type;
}
function getUpfile()
return</script>
</head>
<body>
<div id="uploader" class="wu-example">
<!--用來存放檔案資訊-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">選擇檔案</div>
<button id="ctlBtn" class="btn btn-default btn-sm">開始上傳</button>
</div>
</div>
</body>
</html> 需要上傳功能的表單：
var showUp = function (record)
var form = Ext.create('Ext.form.Panel', {
url: '',
layout: 'anchor',
autoScroll: true,
fieldDefaults: {
labelWidth: 60,
flex: 1,
margin: 5
},
items: [{
name: 'ID',
xtype: 'hidden'
}, {
name: 'Url',
xtype: 'hidden'
}, {
name: 'Name',
xtype: 'displayfield',
fieldLabel: '子系統'
}, {
name: 'Ver',
xtype: 'textfield',
fieldLabel: '版本',
allowBlank: false
}, {
xtype: 'container',
layout: 'hbox',
items: [
{
name: 'updiv',
xtype: 'displayfield',
fieldLabel: '檔案',
value: '',
flex: 1
}, {
xtype: 'button',
text: '選擇檔案',
margin:'0 10 0 0',
handler: function ()
var iframeid = 'iframe_upload';
var content = '<iframe scrolling="auto" frameborder="0" id="'+iframeid+'" src="/frame/uploadFile" style="width:100%;height:100%;"></iframe>';
var win_up = Ext.create('Ext.window.Window', {
title: '選擇檔案并上傳',
width: 350,
height: 250,
modal: true,
layout: 'fit',
items: [{
xtype: 'panel',
html:content
}],
buttons: [{
text: '确定',
handler: function ()
var url = $('#' + iframeid)[0].contentWindow.getUpfile();
form.getForm().findField('updiv').setValue('<a href=/frame/getfile?url=' + url + ' target=_blank>' + url + '</a>');
form.getForm().findField('Url').setValue(url);
win_up.close();
}
}]
}).show();
}
}]
}],
buttons: [{
text: '重置',
handler: function ()
form.reset();
}
}, {
text: '送出',
formBind: true,
disabled:true,
handler: function ()
}
}]
});
var win = Ext.create('Ext.window.Window', {
title: '上傳檔案',
modal: true,
width: 400,
height: 200,
closable: true,
layout: 'fit',
items: [form]
}).show();
form.getForm().findField('ID').setValue(record.data.ID);
form.getForm().findField('Name').setValue(record.data.Name);
form.getForm().findField('updiv').setValue('未選擇');
} //向上傳視窗傳遞參數
function setUploadIframeId(iframeId)
$('#' + iframeId)[0].contentWindow.setUpType('app');
} ![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)