JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

下面我将详细讲解“JQuery.uploadify 上传文件插件的使用详解 for ASP.NET”的完整攻略。

1. 准备工作

1.1 引入jQuery和uploadify插件

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.uploadify/3.1/jquery.uploadify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.uploadify/3.1/uploadify.min.css" />

1.2 页面结构

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

2. 上传文件

2.1 初始化uploadify插件

$(function () {
    $('#file_upload').uploadify({
        'swf': '/Content/uploadify/uploadify.swf',
        'uploader': '/Home/UploadFile',
        'queueID': 'queue',
        'auto': true,
        'multi': true,
    });
});

其中，swf参数为uploadify插件的SWF文件路径，uploader参数为上传文件的接收地址，queueID参数为上传文件的队列（显示上传文件列表的位置），auto参数为是否自动上传文件，multi参数为是否允许同时上传多个文件。

2.2 ASP.NET文件上传

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
    string fileName = file.FileName;
    string filePath = Server.MapPath("~/Content/UploadFile/" + fileName);
    file.SaveAs(filePath);

    return Json(new { success = true });
}

这是ASP.NET文件上传的示例代码，在这里接收上传文件，并将文件保存在服务器上的Content/UploadFile文件夹中。

3. 示例说明

3.1 上传图片并显示

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

<div id="imageList"></div>

<script>
$(function () {
    $('#file_upload').uploadify({
        'swf': '/Content/uploadify/uploadify.swf',
        'uploader': '/Home/UploadFile',
        'queueID': 'queue',
        'auto': true,
        'multi': true,
        'onUploadSuccess': function (file, data, response) {
            var obj = JSON.parse(data);
            if (obj.success) {
                $('#imageList').append('<img src="/Content/UploadFile/' + obj.fileName + '" />');
            }
        }
    });
});
</script>

这是一个上传图片并显示的示例代码，当上传文件成功后，调用onUploadSuccess回调函数，将上传的图片显示在页面上。

3.2 上传文件进度条

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

<div id="progressBar"></div>

<script>
$(function () {
    $('#file_upload').uploadify({
        'swf': '/Content/uploadify/uploadify.swf',
        'uploader': '/Home/UploadFile',
        'queueID': 'queue',
        'auto': true,
        'multi': true,
        'onUploadProgress': function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            var percent = (totalBytesUploaded / totalBytesTotal) * 100;
            $('#progressBar').css('width', percent + '%');
        }
    });
});
</script>

这是一个上传文件进度条的示例代码，当上传文件时，调用onUploadProgress回调函数，根据上传进度设置进度条的宽度。