asp.net使用jQuery Uploadify上传附件示例

下面是使用jQuery Uploadify上传附件的完整攻略。

步骤一：引入jQuery和Uploadify插件

在网页中引入jQuery和Uploadify插件。可以通过以下方式引入：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入Uploadify插件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/jquery-uploadify/3.1.2/uploadify.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-uploadify/3.1.2/uploadify.min.js"></script>

步骤二：HTML结构

在HTML中创建上传按钮和展示区域。示例代码如下：

<input type="file" name="file_upload" id="file_upload" />
<div id="file-list"></div>

步骤三：编写jQuery代码

在jQuery中添加Uploadify配置项和事件监听。示例代码如下：

$(function() {
    $("#file_upload").uploadify({
        'fileObjName' : 'file', // 上传文件的名称
        'swf'      : '/uploadify/uploadify.swf', // Uploadify插件所需的SWF文件路径
        'uploader' : '/upload.php', // 处理上传请求的服务器脚本文件路径
        'fileTypeExts' : '*.jpg;*.jpeg;*.gif;*.png', // 允许上传的文件类型
        'fileSizeLimit' : '10MB', // 允许上传的文件大小
        'queueSizeLimit' : 5, // 上传队列中最多可以同时上传的文件数
        'multi'    : true, // 是否允许多文件上传
        'onUploadSuccess' : function(file, data, response) { // 上传成功的回调函数
            $("#file-list").append("<p>" + file.name + "</p>");
        },
        'onUploadError' : function(file, errorCode, errorMsg, errorString) { // 上传失败的回调函数
            alert('文件 ' + file.name + ' 上传失败: ' + errorMsg);
        }
    });
});

示例说明一：动态设置上传路径

有时，上传要提交给不同的路径，这时需要动态设置上传路径。可以在HTML的上传按钮中加入data-upload-url属性，并通过jQuery获取和赋值。示例代码如下：

<input type="file" name="file_upload" id="file_upload" data-upload-url="/upload_one.php" />
<div id="file-list"></div>

$(function() {
    var uploadUrl = $("#file_upload").data("upload-url"); // 获取动态上传路径
    $("#file_upload").uploadify({
        'fileObjName' : 'file', // 上传文件的名称
        'swf'      : '/uploadify/uploadify.swf', // Uploadify插件所需的SWF文件路径
        'uploader' : uploadUrl, // 处理上传请求的服务器脚本文件路径
        // ...
    });
});

示例说明二：添加文件上传校验

在配置项中添加校验函数，判断文件类型和大小，如果不符合条件则不允许上传。示例代码如下：

$(function() {
    $("#file_upload").uploadify({
        'fileObjName' : 'file', // 上传文件的名称
        'swf'      : '/uploadify/uploadify.swf', // Uploadify插件所需的SWF文件路径
        'uploader' : '/upload.php', // 处理上传请求的服务器脚本文件路径
        // 添加校验函数
        'onSelectError' : function(file, errorCode, errorMsg) {
            if (errorCode == -110) {
                alert("文件大小超出限制！");
            } else if (errorCode == -130) {
                alert("文件类型不正确！");
            }
            return false;
        },
        // ...
    });
});

到这里，使用jQuery Uploadify上传附件的完整攻略就结束了。