主页 / 网络编程 /

asp.net(c#)开发中的文件上传组件uploadify的使用方法

网络编程 2021-07-04 22:40www.168986.cn编程入门
在asp.开发中，有很多可以上传的组件模块，利用HTML的File控件(uploadify)的上传也是一种办法，这里为大家介绍一下（uploadify）的一些使用方法

在Web开发中，有很多可以上传的组件模块，利用HTML的File控件的上传也是一种办法，不过这种方式，需要处理的细节比较多，而且只能支持单文件的操作。在目前Web开发中用的比较多的，可能uploadify（参考http://.uploadify./）也算一个吧，不过这个版本一直在变化，他们的脚本调用也有很大的不同，甚至调用及参数都一直在变化，很早的时候，那个Flash的按钮文字还没法变化，本篇随笔主要根据项目实际，介绍一下3.1版本的uploadify的控件使用，这版本目前还是最新的，对我们做Web开发来说，有一定的参考性。

这个控件有很多参数控制，以及事件的处理响应，相对来说也比较好用。参数控制可以控制上传文件多选、文件类型、文件大小、文件数量、检查文件是否存在，以及一些按钮参数的控制，如文字、高度、宽度等，对提交文件成功与否、完成操作、取消、停止上传等等都有控制，他们的帮助文档也写得比较完善，不过就是各个版本的方法参数完全不同了，但控件是一个好控件。

控件的使用要加入必备的脚本类库，由于该控件是利用了Jquery的功能，还需要应用Jquery脚本文件，如下所示。

代码如下:

    <script src="https://.jb51./JQuery/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="https://.jb51./JQueryTools/uploadify/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
    <link href="https://.jb51./JQueryTools/uploadify/uploadify.css" rel="stylesheet" type="text/css" />

配置控件的一些参数，以及相应的处理事件，如下所示。

代码如下:

<script language="javascript" type="text/javascript">
        $(function () {
            var guid = '<%=Request["guid"] %>';
            var type = '<%=Request["type"] %>';
            if (guid == null || guid == "") {
                guid = newGuid();
            }
            if (type != null) {
                type = type + '/';
            }

            $('#file_upload').uploadify({
                'swf': 'uploadify.swf',                        //FLash文件路径
                'buttonText': '浏  览',                        //按钮文本
                'uploader': 'uploadhandler.ashx?guid=' + guid, //处理ASHX页面
                'formData' : { 'folder' : 'picture' },         //传参数
                'queueID': 'fileQueue',                        //队列的ID
                'queueSizeLimit': 10,                           //队列最多可上传文件数量，默认为999
                'auto': false,                                 //选择文件后是否自动上传，默认为true
                'multi': true,                                 //是否为多选，默认为true
                'removeCompleted': true,                       //是否完成后移除序列，默认为true
                'fileSizeLimit': '10MB',                       //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
                'fileTypeDesc': 'Image Files',                 //文件描述
                'fileTypeExts': '.gif; .jpg; .png; .bmp',  //上传的文件后缀过滤器
                'onQueueComplete': function (event, data) {    //所有队列完成后事件
                    //ShowUpFiles(guid, type, show_div);
                    alert("上传完毕！");
                },
                'onUploadError': function (event, queueId, fileObj, errorObj) {
                    alert(errorObj.type + "" + errorObj.info);
                }
            });
        });

        function newGuid() {
            var guid = "";
            for (var i = 1; i <= 32; i++){
              var n = Math.floor(Math.random()16.0).toString(16);
              guid +=   n;
              if((i==8)||(i==12)||(i==16)||(i==20))
                guid += "-";
            }
            return guid;
        }
    </script>

提一下，这个控件不要参考网上其他的一些说明，否则可能参数及用法不正确，一定要找到对应版本的说明（本篇指的是3.1.1），最好参考该版本的在线文档。

上面的参数，我基本上都给了注释了，还有一些不是很重要的参数，这里没有列出来，需要可以参考在线文档吧。

值得提到的是，这个版本可以修改Flash里面的文字，非常棒，很讨厌以前的那个默认Browse的英文，虽然以前替代图片可以修改文字，还是不太好用。这个直接修改文字，非常好。

值得注意的是uploader参数，这个是我们ashx的后台处理程序，就是控件提交文件给那个页面进行保存处理，添加数据库记录等操作。




页面代码使用很简单，如下所示

代码如下:

<body style="margin-left:10px; margin-:10px">
    <form id="form1" runat="server"  enctype="multipart/form-data">
    <div id="fileQueue" class="fileQueue"></div>

    <div>
    <input type="file" name="file_upload" id="file_upload" />
        <p>
            <input type="button" class="shortbutton" id="btnUpload" onclick="javascript:$('#file_upload').uploadify('upload','')" value="上传" />
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" class="shortbutton" id="btnCancelUpload" onclick="javascript:$('#file_upload').uploadify('cancel')" value="取消" />
        </p>
        <div id="div_show_files"></div>
    </div>
    </form>
</body>


关键是后台上传文件的保存操作了，asp.一般采用ashx的处理页面来处理。
代码如下:

/// <summary>
    /// 文件上传后台处理页面
    /// </summary>
    [WebService(Namespace = "http://tempuri./")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            try
            {
                string guid = context.Request.QueryString["guid"];
                string folder = context.Request["folder"];
                //LogTextHelper.Info(folder);

                HttpPostedFile file = context.Request.Files["Filedata"];
                if (file != null)
                {                   
                    string oldFileName = file.FileName;//原文件名                   
                    int size = file.ContentLength;//附件大小

                    string extenstion = oldFileName.Substring(oldFileName.LastIndexOf(".") + 1);//后缀名                   
                    string newFileName = GetNewFileName(oldFileName);//生成新文件名
                    //LogTextHelper.Info(newFileName);

                    #region 上传到远程服务器
                    //FileServerManage fsw = new FileServerManage();
                    //string uploadFilePath = "/" + newFileName;
                    //if (!string.IsNullOrEmpty(folder))
                    //{
                    //    uploadFilePath = string.Format("/{0}/{1}", folder, newFileName);
                    /

上一篇：asp.net下String.prototype.split()的兼容问题 下一篇：asp.net 学习之路 项目整体框架简单的搭建

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by