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

下面我将为您详细讲解asp.net(c#)开发中文件上传组件uploadify的使用方法（带进度条）的完整攻略。

一. 简介

uploadify是一款基于jQuery的文件上传插件，支持多文件上传，支持进度条显示。

二. 安装与引入

1. 下载uploadify：在官网 https://www.uploadify.com/ 下载uploadify并解压文件。

2. 引入jQuery：在代码中先引入jQuery库，uploadify是基于jQuery开发的组件。

3. 引入uploadify文件：将下载的uploadify文件复制到项目中的文件夹中，然后在代码中引入这些文件。

<link href="uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>

三. 使用方法

1. 文件上传HTML代码（上传按钮）

<input type="file" name="file_upload" id="file_upload" />

1. JavaScript代码

<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'swf': 'uploadify/uploadify.swf', //swf文件路径
            'uploader': 'uploadify/uploadify.ashx', //上传处理文件的路径
            'multi': true,
            'buttonText': '请选择文件',
            'queueID': 'fileQueue',
            'onUploadStart': function () {
                //上传开始前触发
            },
            'onUploadComplete': function () {
                //上传完成时触发
            },
            'onUploadSuccess': function (file, data, response) {
                //上传成功时触发
                console.log(file.name + ' 上传成功！');
            },
            'onUploadError': function (file, errorCode, errorMsg, errorString) {
                //上传出错时/上传取消时触发
                console.log('文件：' + file.name + ' 上传失败，' + errorMsg);
            },
            // 进度条
            'progressData': 'percentage',
            'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                //每一个文件上传成功后都会回调一次这个函数
                var progress = totalBytesUploaded / totalBytesTotal * 100;
                $('#fileUploadProgress').html('进度：' + progress.toFixed(2) + '%');
            }
        });
    });
</script>

四. 示例说明

示例1. 带文件类型限制的上传

HTML代码

<label>上传文件：</label> 
<input type="file" name="file_upload" id="file_upload" /> 

JavaScript代码

$("#file_upload").uploadify({
    'uploader': 'uploadify/uploadify.ashx', // 服务器处理路径 
    'swf': 'uploadify/uploadify.swf', // Flash 插件路径 
    'queueID': 'fileQueue', // 指定文件列表的ID 
    'fileTypeExts': '*.gif; *.jpg; *.jpeg; *.png', // 允许上传的文件类型（后缀） 
    'fileTypeDesc': '请选择图片', // 文件类型说明 
    'buttonText': '<i class="icon-upload-alt"></i>上传', // 上传按钮上的文字 
    'fileSizeLimit': '2MB', // 允许上传的文件大小（KB） 
    'progressData': 'percentage', // 上传进度条 
    'onUploadStart': function(file) {
        console.log('开始上传文件！ 文件名：' + file.name);
    },
    'onUploadSuccess': function(file, data, response) {
         console.log('文件上传成功！ 文件名：' + file.name);
    },
    'onUploadError': function(file, errorCode, errorMsg, errorString) {
        console.log('文件上传出错！ 文件名：' + file.name + '，错误信息：' + errorMsg);
    }
});

示例2. 模拟上传提交

HTML代码

<label>上传文件：</label> 
<input type="file" name="file_upload" id="file_upload" /> 
<a href="#" id="btnUpload" class="btn btn-primary">上传</a> 

JavaScript代码

$('#btnUpload').click(function() {
    $('#file_upload').uploadifyUpload();
});

$('#file_upload').uploadify({
    'uploader': 'uploadify/uploadify.ashx', // 服务器处理路径 
    'swf': 'uploadify/uploadify.swf', // Flash 插件路径 
    'queueID': 'fileQueue', // 指定文件列表的ID 
    'buttonText': '<i class="icon-upload-alt"></i>上传', // 上传按钮上的文字
    'fileSizeLimit': '2MB', // 允许上传的文件大小（KB） 
    'progressData': 'percentage', // 上传进度条 
    'onUploadStart': function(file) {
        console.log('开始上传文件！ 文件名：' + file.name);
    },
    'onUploadSuccess': function(file, data, response) {
         console.log('文件上传成功！ 文件名：' + file.name);
    },
    'onUploadError': function(file, errorCode, errorMsg, errorString) {
        console.log('文件上传出错！ 文件名：' + file.name + '，错误信息：' + errorMsg);
    }
});

以上就是asp.net(c#)开发中文件上传组件uploadify的使用方法（带进度条）的完整攻略，希望可以对您有所帮助。