jDownload.js与.net交互

1.引入文件

jQuery.js(自行下载)

jquery.jdownload.js

jquery.jdownload.css(自行下载)

jquery-ui-1.8.16.custom.css(自行下载)

jquery-ui-1.8.16.custom.min.js(自行下载,包括相关图片)


jquery.jdownload.js文件

/*
* jDownload - A jQuery plugin to assist file downloads
* Examples and documentation at: http://jdownloadplugin.com
* Version: 1.3 (18/11/2010)
* Copyright (c) 2010 Adam Chambers, Tim Myers
* Licensed under the GNU General Public License v3: http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.4+ & jQueryUI 1.8+
*/

(function ($) {
    $.fn.jDownload = function (settings) {
        var config = {
            root: "",
            fileId: "001",
            event: "down", // default click event??
            dialogTitle: "文件下载",
            dialogDesc: '马上下载文件?',
            dialogWidth: 450,
            dialogHeight: 'auto',
            dialogModal: false,
            showfileInfo:true,
            start: null,
            stop: null,
            download: null,
            cancel: null
        }
        settings = $.extend(config, settings);

        $("iframe.jDownloadFrame").next("div").remove();
        $("iframe.jDownloadFrame").remove();
        $("div.jDownloadDialog").remove();

        var dialogID = "jDownloadDialog_" + $('.jDownloadDialog').length;
        var iframeID = "jDownloadFrame_" + $('.jDownloadFrame').length;

        //创建iframe和dialog
        var iframeHTML = '<iframe class="jDownloadFrame" src="" id="' + iframeID + '"></iframe>';
        var dialogHTML = '<div class="jDownloadDialog" title="' + settings.dialogTitle + '" id="' + dialogID + '"></div>';

        //将iframe和dialog添加到文档
        $('body').append(iframeHTML + dialogHTML);

        var iframe = $('#' + iframeID);
        var dialog = $('#' + dialogID);

        //设置iframe样式
        iframe.css({
            "height": "0px",
            "width": "0px",
            "visibility": "hidden"
        });

        //设置dialog选项
        dialog.dialog({
            autoOpen: false,
            buttons: {
                "取消": function () {
                    if ($.isFunction(settings.cancel)) 
                    {
                        settings.cancel();
                    }
                    $(this).dialog('close');

                    //清除窗体
                    $("iframe.jDownloadFrame").remove();
                    $("iframe.jDownloadFrame").next("div").remove();
                    $("div.jDownloadDialog").remove();
                },

                "下载": function () {
                    if ($.isFunction(settings.download)) 
                    {
                        settings.download();
                    }
                    start_download();
                }
            },
            width: settings.dialogWidth,
            height: settings.dialogHeight,
            close: function () {
                if ($.isFunction(settings.stop)) 
                {
                    settings.stop;
                }
                /*此处如果也用remove清除,360急速模式不兼容,所以改为隐藏*/
                $("iframe.jDownloadFrame").css("display", "none");
                $("iframe.jDownloadFrame").next("div").css("display", "none");
                $("div.jDownloadDialog").css("display", "none");
            },
            modal: settings.dialogModal
        });

        $(this).bind(settings.event, function () {
            if ($.isFunction(settings.start)) 
            {
                settings.start();
            }
            var _this = $(this);
            dialog.html("");

            var filePath = settings.filePath;
            dialog.html('<p>正在获取文件信息...</p><img src="' + settings.root + 'Scripts/Download/loader.gif" alt="获取信息中" />');
            $.ajax({
                type: "POST",
                url: settings.root + "Handlers/GetFiles.ashx",
                data: { "opt": "get-file-info", fileId: settings.fileId },
                dataType: "json",
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    dialog.html("<p class=\"jDownloadError\">获取文件时出现错误</p>");
                },
                success: function (data) {
                    setTimeout(function () {
                        if (data.length == 0) 
                        {
                            dialog.html("<p class=\"jDownloadError\">无法找到文件</p>");
                        }
                        else 
                        {
                            if (settings.showfileInfo == true) 
                            {
                                var html = "<div class=\"jDownloadInfo\">";
                                html += "<p><span>文件名称:</span> " + data[0] + "</p>";
                                html += "<p><span>文件类型:</span> " + data[1] + "</p>";
                                html += "<p><span>文件大小:</span> " + data[2] + " KB</p>";
                                html += "</div>";
                                //移除旧文件信息
                                $('.jDownloadInfo, .jDownloadError').remove();

                                var desc = (_this.attr('title') != null && _this.attr('title').length > 0) ? _this.attr('title') : settings.dialogDesc;

                                //添加描述信息
                                dialog.html('<p>' + desc + '</p>' + html);
                            }
                        }
                    }, 200);
                }
            });

            //打开下载提示框

            dialog.data('jDownloadData', { filePath: filePath }).dialog('open');
            return false;
        });

        //开始下载
        function start_download(i) {
            iframe.attr('src', settings.root + 'Handlers/GetFiles.ashx?opt=download-file');
            //关闭下载提示框
            dialog.dialog('close');
            return false;
        }
    }

})(jQuery);

2.GetFiles.ashx文件

public void ProcessRequest(HttpContext context)
        {
            string opt = string.IsNullOrEmpty(context.Request["opt"].ToString()) ? "" : context.Request["opt"].ToString();
            
            switch (opt)
            {
                case "get-file-info": this.GetFileInfo(context);
                    break;
                case "download-file": this.DownLoadFile(context);
                    break;
            }
        }

        public void GetFileInfo(HttpContext context)
        {
            string fileid = string.IsNullOrEmpty(context.Request["fileid"]) ? "" : context.Request["fileid"].ToString();

            List<object> list = new List<object>();
            FileInfo file = new FileInfo();

            using (DataContext dc = new DataContext(DbHelper.GetConStr))
            {
                file = dc.GetTable<FileInfo>().ToList().Where(p => p.FileId == fileid).FirstOrDefault();
            }

            if (file != null)
            {
                list.Add(file.FileName);
                list.Add(Path.GetExtension(file.FileName));
                list.Add(file.FileSize);
                context.Session["filePath"] = file.FilePath;
            }
            context.Response.Write(JsonBase.Serialize<List<object>>(list));
        }

        public void DownLoadFile(HttpContext context)
        {
            DownLoad2.DownloadFile(context,context.Session["filePath"].ToString() , 1024 * 1024 * 10);
        }


3.前台代码

<script type="text/javascript">
        $(function () {
            $("#btnDownLoad").click(function () {
                $(this).jDownload({fileId:"003"});
                $(this).trigger("down");
            });
        });

4.运行效果



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值