asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）

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

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

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


代码如下:

<script src="http://www.jb51.net/JQuery/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="http://www.jb51.net/JQueryTools/uploadify/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
    <link href="http://www.jb51.net/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-top: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="上传" />
                
            <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.net一般采用ashx的处理页面来处理。


代码如下:

/// <summary>
    /// 文件上传后台处理页面
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [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);
                    //}
                    //bool uploaded = fsw.UploadFile(file.InputStream, "/" + folder + "/" + newFileName);
                    #endregion

#region 本地服务器上传

AppConfig config = new AppConfig();
                    string uploadFiles = config.AppConfigGet("uploadFiles");
                    if (string.IsNullOrEmpty(uploadFiles))
                    {
                        uploadFiles = "uploadFiles";
                    }
                    if (!string.IsNullOrEmpty(folder))
                    {
                        uploadFiles = Path.Combine(uploadFiles, folder);
                    }

string uploadPath = Path.Combine(HttpContext.Current.Server.MapPath("/"), uploadFiles);
                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }
                    string newFilePath = Path.Combine(uploadPath, newFileName);
                    LogTextHelper.Info(newFilePath);
                    file.SaveAs(newFilePath);
                    bool uploaded = File.Exists(newFilePath);

#endregion

if (uploaded)
                    {
                        #region 文件保存成功后，写入附件的数据库记录
                        //AttachmentInfo attachmentInfo = new AttachmentInfo();
                        //attachmentInfo.EditorTime = DateTime.Now;
                        //attachmentInfo.FileExtend = extenstion;
                        //attachmentInfo.FileName = folader + "/" + newFileName;
                        //attachmentInfo.OldFileName = oldFileName;
                        //attachmentInfo.Size = size;
                        //attachmentInfo.Guid = guid;
                        //BLLFactory<Attachment>.Instance.Insert(attachmentInfo);
                        #endregion
                    }
                }
                else
                {
                    LogTextHelper.Error("上传文件失败");
                }
            }
            catch (Exception ex)
            {
                LogTextHelper.Error("上传文件失败", ex);
                throw;
            }
        }

/// <summary>
        /// 获取新的名称 比如:aa.jpg转化为aa(20090504).jpg
        /// </summary>
        /// <param name="fileName">文件名称[aa.jpg]</param>
        /// <returns>新的文件名称</returns>
        public static string GetNewFileName(string fileName)
        {
            if (string.IsNullOrEmpty(fileName))
                return string.Empty;

//文件后缀名
            string extenstion = fileName.Substring(fileName.LastIndexOf(".") + 1);
            string name = fileName.Substring(0, fileName.LastIndexOf(".")) + "(" + DateTime.Now.ToFileTime() + ")";
            string newFileName = name + "." + extenstion;
            return newFileName;
        }

public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

赞 (0)

相关推荐

  • C#实现文件上传及文件下载功能实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: public ActionResult Upload() { // var pathUrl = "http://" + Request.Url.Authority; var file = Request.Files["Filedata"]; var uploadFileName = file.FileName; string filePath = "/File/" + uploadFileNa

  • asp.net(c#)文件下载实现代码

    复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; usi

  • C# 文件上传 默认最大为4M的解决方法

    1,环境:window 2003 ,IIS6.0 要首先要修改IIS6.0中的asp请求的最大字节数,默认时为200K: 方法:打开位于 C:\Windows\System32\Inetsrv 中的 metabase.XML, 并修改 AspMaxRequestEntityAllowed 为你需要的值(例如 "1073741824", 1GB): 技术背景: 在 IIS 6.0 中, AspMaxRequestEntityAllowed 属性指定了一个 ASP 请求(Request)可

  • C# 通用文件上传类

    1.Upfile.aspx: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upfile.aspx.cs" Inherits="Inc_Upfile" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • C#实现word文件下载的代码

    C#实现word文件下载的代码

    效果: 思路: 简单的有两种方式下载,一种是流下载,一种是WriteFile下载.以下是使用WriteFile下载. 代码: 复制代码 代码如下: protected void LinkButton1_Click(object sender, EventArgs e)        {            try            {                //WriteFile实现下载(word)                string fileName = "qingpin

  • C#实现文件上传下载Excel文档示例代码

    C#实现文件上传下载Excel文档示例代码

    要求 环境信息:WIN2008SERVER  开发工具:VS2015 开发语言:C# 要求: 1.点击同步数据后接口获取数据展示页面同时过滤无效数据并写入数据库,数据可导出Excel并支持分类导出 2.Excel导入确认数据,调用服务处理数据后写入数据库,并支持分类导出 这两天搞了一个小功能,其他的不说了针对Excel导入导出做一个小总结 导出文件 这里的文件导出是底层写好的,个人理解有限而且毕竟属于公司就不贴具体代码了,简单说一下思路 首先是建立导出Excel管理类,用于管理Excel文件导出

  • C#实现Web文件上传的两种方法实例代码

    1. C#实现Web文件的上传 使用C#如何实现文件上传的功能呢?下面笔者简要介绍一下. 首先,在你的Visual C# web project 中增加一个上传用的Web Form,为了要上传文件,需要在ToolBox中选择HTML类的File Field控件,将此控件加入到Web Form中,然而此时该控件还不是服务端控件,我们需要为它加上如下一段代码:<input id=PreviousFile1 type=file size=49 runat="server">,这样

  • c#文件下载示例的4种方法分享

    复制代码 代码如下: using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System

  • asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）

    asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）

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

  • Android实现文件上传和下载倒计时功能的圆形进度条

    Android实现文件上传和下载倒计时功能的圆形进度条

    screenshot 截图展示 import step1. Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } step2. Add the dependency dependencies { compile 'com.github.yanjiabin:ExtendsRingPrigr

  • ASP.NET中FileUpload文件上传控件应用实例

    使用 FileUpload 控件,可以为用户提供一种将文件从用户的计算机发送到服务器的方法.该控件在允许用户上载图片.文本文件或其他文件时很有用.要上载的文件将在回发期间作为浏览器请求的一部分提交给服务器.在文件上载完毕后,您可以用代码管理该文件. 大致了解了一下FileUpload,让我们来看一下FileUpload几个实际应用中问题的处理方法. 1.一次上传多个文件 要一次上传多个文件,我们可以像传单个文件那样对每个文件单独进行处理,除此之外,我们还可以使用HttpFileCollectio

  • android 开发中使用okhttp上传文件到服务器

    android 开发中使用okhttp上传文件到服务器

    开发android手机客户端,常常会需要上传文件到服务器,比如:你手机里的照片. 使用okhttp会是一个很好的选择.它使用很简单,而且运行效率也很高. 首先,在 app/build.gradle 的 dependencies 增加 implementation 'com.squareup.okhttp3:okhttp:3.8.1' 可以参照如下代码 apply plugin: 'com.android.application' apply plugin: 'kotlin-android' ap

  • Java中实现文件上传下载的三种解决方案(推荐)

    java文件上传与文件下载是程序开发中比较常见的功能,下面通过本文给大家介绍Java中实现文件上传下载的三种解决方案,具体详情如下所示: 第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null; String fileAddre="/numUp"; try { InputStream stream = file.getInputStream(

  • PHP中，文件上传

    在PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destination )本函数检查并确保由 filename 指定的文件是合法的上传文件(即通过 PHP 的 HTTP POST 上传机制所上传的).如果文件合法,则将其移动为由 destination 指定的文件. 如果 filename 不是合法的上传文件,不会出现任何操作,move_uploaded_fil

  • IIS 7 中设置文件上传大小限制设置方法

    IIS 7 中设置文件上传大小限制设置方法

    在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: 复制代码 代码如下: <system.web><httpRuntime maxRequestLength="1048576" executionTimeout="600"/>        </system.web> 但在IIS7中,设置如上设置后,不管设置多大数值,最大上传了限制为30M 还要进行如下设置才能正确: 方法1: appcmd set config &qu

  • 在Koa.js中实现文件上传的接口功能

    文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

  • python中Django文件上传方法详解

    Django上传文件最简单最官方的方法 1.配置media路径 在settings.py中添加如下代码: MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2.定义数据表 import os from django.db import models from django.utils.timezone import now as timezone_now def upload_to(instance, filename):     now = timezo

  • jQuery.uploadify文件上传组件实例讲解

    jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

随机推荐