zoukankan      html  css  js  c++  java

  • 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/uploadify.zip 版本信息如下：

    解压之后，目录结构如下（不在详细解释）：

    2、使用流程

    下载的程序是PHP示例，由于项目使用的是asp.net mvc，使用uploadify可分以下步骤：

    •（1）加入uploadify js类库（把uploadify相关js类库引用到项目的相关位置，比如放到scripts目录）

    •（2）对uploadify二次进行封装，满足项目调用

    •（3）编写文件上传处理方法

    •（4）页面引用相关类库并编写上传脚本

    2.1 对uploadify二次进行封装

    针对uploadify调用进行js类库封装，满足项目使用：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    //转换成key=value&key=value格式
    tx.toParam = function (dto) {
    return jQuery.param(dto);
    }
    //设置上传文件
    tx.uploadify = function (divId, options, action) {
    if (options == undefined && action == undefined) {
    $('#' + divId).uploadify("upload");
    return;
    }
    if (options == undefined) {
    abp.message.warn("请输入参数配置");
    return;
    }
    var fileexts = options.fileexts;
    if (fileexts == undefined || fileexts.length <= 0) {
    abp.message.warn("要选择文件的扩展名不能为空");
    return;
    }
    $('#' + divId).uploadify({
    uploader: '/files/upload?r=' + Math.random()
    + "&fileexts=" + encodeURIComponent(fileexts)
    + "&" + (options !== undefined ? tx.toParam(options.params) : ""), // 服务器端处理地址
    swf: '/Scripts/uploadify/uploadify.swf', // 上传使用的 Flash
    60, // 按钮的宽度
    height: 23, // 按钮的高度
    buttonText: "选择文件", // 按钮上的文字
    buttonCursor: 'hand', // 按钮的鼠标图标
    fileObjName: 'Filedata', // 上传参数名称
    fileTypeExts: fileexts, // 扩展名
    fileTypeDesc: "请选择文件", // 文件说明
    fileDesc: '不超过200M的',
    sizeLimit: 204800000, //允许上传的文件大小(kb) 此为2M
    auto: false, // 选择之后，自动开始上传
    multi: true, // 是否支持同时上传多个文件
    queueSizeLimit: 1, // 允许多文件上传的时候，同时上传文件的个数
    onSelectOnce: function (event, data) { //在单文件或多文件上传时，选择文件时触发
    //event 事件对象(the event object)
    //data 选择的操作信息
    //data.filesSelected 选择文件操作中选中的文件数量
    },
    onUploadStart: function (file) {
    //file:将要上载的文件对象
    ShowBusy();
    },
    onUploadComplete: function (file) {
    //file:上传或返回一个错误的文件对象。
    },
    onUploadSuccess: function (file, data, response) {
    //file:成功上传的文件对象
    //data:服务器端脚本返回的数据（任何由文件响应的任何东西）
    //response:服务器返回的响应是否真的成功或错误，如果没有响应。如果返回false，这successtimeout期权到期后的反应真是假设。
    if (action !== undefined) {
    action(JSON.parse(data));
    }
    ClearBusy();
    },
    onUploadError: function (file, errorCode, errorMsg, errorString) {
    //file:上传的文件对象
    //errorCode:返回的错误代码
    //errorMsg:返回的错误消息
    //errorString:包含错误的所有细节的可读的错误信息
    if (action !== undefined) {
    if (action !== undefined) {
    action({
    result: errorCode,
    message: errorMsg,
    filename: "",
    fileext: ""
    });
    }
    }
    ClearBusy();
    }
    });
    }

    2.2 文件上传处理

    使用MVC特性，要登录之后才能进行文件上传：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    using System;
    using System.IO;
    using System.Security.Principal;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Security;
    namespace TxSms.Web.Controllers
    {
    /// <summary>
    /// 文件上传管理
    /// </summary>
    [Authorize]
    public class FilesController : TxSmsControllerBase
    {
    private static string jsonResult = "{0}"result":{1},"message":"{2}","filename":"{3}","fileext":"{4}"{5}";
    /// <summary>
    /// 文件上传页面
    /// </summary>
    /// <returns></returns>
    [Authorize]
    public ActionResult Index()
    {
    return View();
    }
    /// <summary>
    /// 上传文件
    /// </summary>
    /// <param name="filedata"></param>
    /// <returns></returns>
    [Authorize]
    public ActionResult Upload(HttpPostedFileBase filedata)
    {
    // 如果没有上传文件
    if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0)
    {
    return new JsonStringResult(string.Format(jsonResult, "{", -1, "", "", "", "}"));
    }
    string parmPath = Request.QueryString["path"];
    string parmGetzipfile = Request.QueryString["getzipfile"];
    if (parmGetzipfile.IsNullOrEmpty())
    {
    parmGetzipfile = "0";
    }
    // 保存到 ~/uploads 文件夹中，名称不变
    string time = DateTime.Now.ToString("yyyyMMddHHmmssfff");
    string fileext = Path.GetExtension(filedata.FileName);
    string filename = time + fileext;
    string virtualPath = parmPath.IsNullOrEmpty()
    ? $"~/uploads/"
    : $"~/uploads/{parmPath}/";
    string actualPath = Server.MapPath(virtualPath);
    if (!Directory.Exists(actualPath))
    {
    Directory.CreateDirectory(Server.MapPath(virtualPath));
    }
    // 文件系统不能使用虚拟路径
    var destFile = virtualPath + filename;
    string path = Server.MapPath(destFile);
    filedata.SaveAs(path);
    bool iszip = fileext != null && (fileext.Equals(".zip", StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals("1"));
    if (iszip)
    {
    var virtualPathZip = virtualPath + time + "/";
    string actualPathZip = Server.MapPath(virtualPathZip);
    if (!Directory.Exists(actualPathZip))
    {
    Directory.CreateDirectory(actualPathZip);
    }
    destFile = fileext = "";
    //第一步骤，解压
    TxSmsZipHelper.UnZipFile(path, actualPathZip);
    //第二步骤，获取excel文件，如果没有获取到，则抛出异常
    //获得目录信息
    var dir = new DirectoryInfo(actualPathZip);
    //获得目录文件列表
    var files = dir.GetFiles();
    foreach (FileInfo fileName in files)
    {
    //var ext = Path.GetExtension(fileName.Name).ToLower();
    //if (ext == ".xls" || ext == ".xlsx")
    //{
    // destFile = Path.Combine(fileName.DirectoryName, fileName.Name);
    // break;
    //}
    destFile = virtualPathZip + fileName.Name;
    fileext = Path.GetExtension(fileName.Name);
    break;
    }
    }
    return new JsonStringResult(string.Format(jsonResult, "{", 0, "上传成功", destFile, fileext.ToLower(), "}"));
    }
    public class JsonStringResult : ContentResult
    {
    public JsonStringResult(string json)
    {
    Content = json;
    ContentType = "application/json";
    }
    }
    }
    }

    文件上传路径：/files/upload

    2.3 页面调用

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/themes/base/uploadify/uploadify.css" rel="stylesheet"/>
    <script src="/Scripts/jquery-2.1.4.min.js"></script>
    <script src="/Scripts/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
    $(function () {
    var ASPSESSID = '3iupfg2udk4m5hyzfj5ydlso';
    var auth = '';
    //初始化
    tx.uploadify('uploadify'
    ,
    { //参数配置
    fileexts: "*.jpg;*.png;*.zip", //要选择文件的扩展名，多个用;分割
    //formData: { ASPSESSID: ASPSESSID, AUTHID: auth },
    params: { //参数
    path: 'files',//上传路径，允许为空
    getzipfile: 1 //解压zip文件，并获取文件 0：不解压获取，1：解压获取
    }
    }
    , function (data) { //回调函数
    //data.result：0 表示成功，其他表示错误
    //data.message：信息
    //data.filename：文件名称
    //data.fileext：文件扩展
    console.log(data.result);
    console.log(data.message);
    console.log(data.filename);
    console.log(data.fileext);
    });
    $("#btnUpload").click(function () {
    tx.uploadify('uploadify'); //开始上传
    });
    });
    </script>
    </head>
    <body>
    <div style="margin: 40px;">
    <div id="uploadify"></div>
    <button id="btnUpload">开始上传</button>
    </div>
    </body>
    </html>

    允许程序，界面如下：

    选择文件—>开始上传：

    ok，到此已经完成。

    3、http 302解决方案

    很怀疑二八原则，很快就出现了。同事用firefox进行测试，遇到如下提示：

    查找大量资料，发下是Upload方法认证的问题，去掉[Authorize]属性标签即可，代码修改如下：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    using System;
    using System.IO;
    using System.Web;
    using System.Web.Mvc;
    namespace TxSms.Web.Controllers
    {
    /// <summary>
    /// 文件上传管理
    /// </summary>
    //[Authorize]
    public class FilesController : TxSmsControllerBase
    {
    private static string jsonResult = "{0}"result":{1},"message":"{2}","filename":"{3}","fileext":"{4}"{5}";
    /// <summary>
    /// 文件上传页面
    /// </summary>
    /// <returns></returns>
    [Authorize]
    public ActionResult Index()
    {
    return View();
    }
    /// <summary>
    /// 上传文件
    /// </summary>
    /// <param name="filedata"></param>
    /// <returns></returns>
    //[Authorize]
    public ActionResult Upload(HttpPostedFileBase filedata)
    {
    //加入认证信息
    if (this.LoginUser == null)
    {
    return new JsonStringResult(string.Format(jsonResult, "{", -1, "抱歉，未登录，不允许上传", "", "", "}"));
    }
    // 如果没有上传文件
    if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0)
    {
    return new JsonStringResult(string.Format(jsonResult, "{", -2, "无上传文件", "", "", "}"));
    }
    string parmPath = Request.QueryString["path"];
    string parmGetzipfile = Request.QueryString["getzipfile"];
    if (parmGetzipfile.IsNullOrEmpty())
    {
    parmGetzipfile = "0";
    }
    // 保存到 ~/uploads 文件夹中，名称不变
    string time = DateTime.Now.ToString("yyyyMMddHHmmssfff");
    string fileext = Path.GetExtension(filedata.FileName);
    string filename = time + fileext;
    string virtualPath = parmPath.IsNullOrEmpty()
    ? $"~/uploads/"
    : $"~/uploads/{parmPath}/";
    string actualPath = Server.MapPath(virtualPath);
    if (!Directory.Exists(actualPath))
    {
    Directory.CreateDirectory(Server.MapPath(virtualPath));
    }
    // 文件系统不能使用虚拟路径
    var destFile = virtualPath + filename;
    string path = Server.MapPath(destFile);
    filedata.SaveAs(path);
    bool iszip = fileext != null && (fileext.Equals(".zip", StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals("1"));
    if (iszip)
    {
    var virtualPathZip = virtualPath + time + "/";
    string actualPathZip = Server.MapPath(virtualPathZip);
    if (!Directory.Exists(actualPathZip))
    {
    Directory.CreateDirectory(actualPathZip);
    }
    destFile = fileext = "";
    //第一步骤，解压
    TxSmsZipHelper.UnZipFile(path, actualPathZip);
    //第二步骤，获取excel文件，如果没有获取到，则抛出异常
    //获得目录信息
    var dir = new DirectoryInfo(actualPathZip);
    //获得目录文件列表
    var files = dir.GetFiles();
    foreach (FileInfo fileName in files)
    {
    //var ext = Path.GetExtension(fileName.Name).ToLower();
    //if (ext == ".xls" || ext == ".xlsx")
    //{
    // destFile = Path.Combine(fileName.DirectoryName, fileName.Name);
    // break;
    //}
    destFile = virtualPathZip + fileName.Name;
    fileext = Path.GetExtension(fileName.Name);
    break;
    }
    }
    return new JsonStringResult(string.Format(jsonResult, "{", 0, "上传成功", destFile, fileext.ToLower(), "}"));
    }
    public class JsonStringResult : ContentResult
    {
    public JsonStringResult(string json)
    {
    Content = json;
    ContentType = "application/json";
    }
    }
    }
    }

    再次用firefox测试如下：

    4、注意事项

    1、封装的js类库适合单文件上传

    2、upload里面的登录认证是通过判断当前账号信息是否为null

    3、本项目使用的abp框架，有兴趣的可以去了解下：http://www.aspnetboilerplate.com/

    以上所述是小编给大家介绍的jQuery.uploadify文件上传组件实例讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
  • 相关阅读:
    typeof的用法
    新建一个express工程，node app无反应
    搜索引擎-倒排索引基础知识
    搭建Hadoop2.6.0+Eclipse开发调试环境(以及log4j.properties的配置)
    hadoop下远程调试方法
    回调函数透彻理解Java
    Maven 手动添加 JAR 包到本地仓库
    Hbase rowkey热点问题
    Hadoop 2.2 & HBase 0.96 Maven 依赖总结
    通过Java Api与HBase交互
  • 原文地址：https://www.cnblogs.com/zxtceq/p/7388009.html
Copyright © 2011-2022 走看看