与vue整合
整合代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>泽优小文件上传控件(up2)-vue示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="js/up2.css" type="text/css" rel="Stylesheet"/>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/json2.min.js" type="text/javascript"></script>
<script src="js/up2.app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/up2.edge.js" type="text/javascript" charset="utf-8"></script>
<script src="js/up2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/up2.file.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>输入本地文件路径可上传指定路径的文件。</p>
<div id="vue-up2">
<p>
文件路径：<input ref="filePath" type="text" size="50" value="D:\360safe-inst.exe" />
<input ref="btnUpF" type="button" value="上传本地文件" />
</p>
<up2 ref="up2"></up2>
<input ref="btnPost" type="button" value="开始上传队列" />
</div>
<div id="msg"></div>
<script type="text/javascript" language="javascript">
//定义组件
Vue.component('up2', {
data() {return {app: null}},
props: {},
mounted() {
this.app = new HttpUploaderMgr();
this.app.Config["Droper"] = false;
this.app.Config["PostUrl"] = "http://localhost:4854/upload.aspx";
this.app.event.post_complete = function (url) { $("#msg").append(url + "<br/>"); };
this.app.event.add_file = function (f/*HttpUploader*/) { $("#msg").append(f.fileLoc.path + "<br/>"); };
this.app.event.queue_complete = function () { };//队列上传完毕
this.app.loadTo("up2-tmp");
},
methods: {},
destroyed(){},
template: '<div id="up2-tmp"></div>'
});
//创建vue对象
var ue = new Vue({
el: '#vue-up2',
data: {}
, methods: {}
, mounted: function () {
var up2 = this.$refs.up2.app;
$(this.$refs.btnPost).click(function () { up2.postAll(); });
$(this.$refs.btnUpF).click(function () { up2.app.addFile({ path: $(this.$refs.filePath).val() }); });
}
});
</script>
</body>
</html>
整合效果：
