先做一个上传界面：
<!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');
}
表单界面也需要应用jquery
