如何实现Jquery的LigerUI文件上传

一 在Head中加入

<script src= /lib/js/ajaxfileupload js type=text/javascript></script><script src= /lib/js/ligerui expand js type=text/javascript></script>

二 Html中的Div代码

<div id="AppendBill_Div" ><% 上传 单 %><table ><岁猛tr ><td >图标: </td><td><input type=file id="fileupload" name=fileupload/></td></tr></table></div>

三 Js中 写的是关键部分 会LigerUI的朋友 你懂得

grid中添加乎模桥项【存地址字段】 { display: "扫描件" name: "AppendBillPath" width: type: "text" align: "left" } Form可添加项【存地址和d出选择框】

{ name: "AppendBillPath " type: "hidden" } // 上传 【 】 { display: "扫描件" name: "AppendBillPath" boboxName: "AppendBillPath " newline: true labelWidth: width: space: type: "select" options: {}} // 上传 【 】 $ ligerui get("AppendBillPath ") set( onBeforeOpen f_selectAppendBillPath_ ) // 【扫描件】 // 上传 【 】 事件

// #region ======================================= 【上传扫描件窗口】 // 上传 【 】

var AppendBillPathDetail = nullfunction f_selectAppendBillPath_ () { var imageurl = $("#AppendBill") val()var AppendBill_Id = $("#AppendBill") val()// 单号 if (imageurl length == ) { LG showError("您没有输入单号 请输入随单号！")return}

if (AppendBillPathDetail) { AppendBillPathDetail show()

} else {

AppendBillPathDetail = $ ligerDialog open({ target: $("#AppendBill_Div") title: 添加图标 width: height: top: left: // d出窗口大小 buttons: [ { text: 上传 onclick: function () { AppendBillPath_save()} } { text: 取消 onclick: function () { AppendBillPathDetail hide()} } ] })} }

function AppendBillPath_save() {

var imgurl = $("#fileupload") val()// var filehelpcode = $("#filehelpcode") val()

var extend = imgurl substring(imgurl lastIndexOf(" ") imgurl length)extend = extend toLowerCase()if (extend == " jpg" || extend == " jpeg" || extend == " png" || extend == " gif" || extend == " bmp") { } else {

LG showError("请上传jpg jpep png gif bmp格式码简的图片文件")

return} var imageurl = $("#AppendBill") val()// extend alert(imageurl)

$ ajaxFileUpload({ url: " /handle/ImageUpload aspx?imageurl=" + imageurl // 上传 【 】 aspx文件 secureuri: false fileElementId: "fileupload" //Input file id

dataType: "text" success: function (data status) {

// // 保存路径

// $("#AppendBillPath ") val(Data)LG tip(data)f_reload()} error: function (data status e) { LG showError(data)

} })

}

// #endregion 四 后台cs 写一句关键的 可以返回参数 前台提示

lishixinzhi/Article/program/Java/JSP/201311/20623

从API来看，它们之间视乎没有根本性的区别，下面看对比图，

我这里只列出了API文档中参数的对比图，两个类其他的API也与图中情况差不多，Dialog的API比较多，但几乎都涵盖了Window中的API，可以自行访问下面的网址查看：

http://api.ligerui.com/

Window的API里面比Dialog多出了一样东西，那就是事件回调函数。

为什么他们的API这么接近，为啥不是一个东西呢？下面我找到了它的源码：

http://git.oschina.net/ligerui/LigerUI/tree/Release/Source/lib/ligerUI/js/plugins

在 ligerWindow.js 中，我发现第46行，如下

l.controls.Window.ligerExtend(l.core.Win, {

同样我在 ligerDialog.js 中，104行，有同样的一句话，如下

l.controls.Dialog.ligerExtend(l.core.Win, {

这表示Dialog与Window是继承自同一个父类 l.core.Win，随后我查看了 js/core/base.js，在这唯哪个文件的770行我看到了 liger.core.Win 的真实面目。liger.core.Win 并没有做很多的事情，只实现遮罩功能和定义一些抽象接口。

最后我又重新回去阅读了 ligerDialog.js 的代码，从第 875 行开始一直到结束，这才是 Dialog 与 Window 最大的区别所在，Dialog 是单例对象，不建议在使用的时候继承与扩展，而 Window 是一个多例类，允许直接继承并扩展。

我拿出源码里面 5个 最基本的函数，来说明 Dialog 是单例类的事实：

$.ligerDialog.open = function (p)

{

    // 实例化一个 l.controls.Dialog 对象

    // 内部可以追述到第33行，使用 liger.run() 函数构造 Dialog 实例

    return $.ligerDialog(p) 

}

$.ligerDialog.close = function ()

{

    // 根据 Dialog类型 查到到所有的 dialog 实例对象

    var dialogs = l.find(l.controls.Dialog.prototype.__getType())

    

    // 循环每一个 dialog实例并销毁

    for (var i in dialogs)

    {

        var d = dialogs[i]

        d.destroy.ligerDefer(d, 5)

    }

    

    // 隐藏遮罩层

    // 在ligerUI中，所有的窗口使用的是一个全局的mask

    // 相关代码可以看 js/core/base.js 598行

    l.win.unmask()

}

$.ligerDialog.show = function (p)

{

    var dialogs = l.find(l.controls.Dialog.prototype.__getType())

  指哪码  if (dialogs.length)

    {

        for (var i in dialogs)

        缓世{

            // 如果已经存在 dialog实例，那么就直接使用实例对象

            // 显示已存在的dialog，并返回

            dialogs[i].show()

            return

        }

    }

    

    // 如果不存在 dialog实例，则初始化一个实例并返回

    return $.ligerDialog(p)

}

$.ligerDialog.hide = function ()

{

    var dialogs = l.find(l.controls.Dialog.prototype.__getType())

    

    // 隐藏dialog实例也是相同的方式

    for (var i in dialogs)

    {

        var d = dialogs[i]

        d.hide()

    }

}

$.ligerDialog.tip = function (options)

{

    // 初始化选项参数

    options = $.extend({

        showType: 'slide',

        width: 240,

        modal: false,

        height: 100

    }, options || {})

    $.extend(options, {

        fixedType: 'se',

        type: 'none',

        isDrag: false,

        isResize: false,

        showMax: false,

        showToggle: false,

        showMin: false

    })

    

    // 构造一个Dialog实例

    return $.ligerDialog.open(options)

}

根据上面的代码解读，结论就很清晰了：

Dialog是一个单例对象，不建议继承与扩展

Window是多例类，允许继承并扩展

我觉得ligerUI对Window的设计没有 Ext 设计得好，Dialog应作为Window的一个单例对象才相对合理，Ext就是这么做的。有兴趣的话，可以了解下Ext，Ext是目前我认为前端UI组件化设计得最好的一个框架。

---