1、jquery.uploadify简介

   
在ASP.NET中上传的控件有众多,例如.NET自带的FileUpload,以致SWFUpload,Uploadify等等,特别后边两个控件的客商体验相比好,无刷新,带上传进程等等。在眼下的短信平台支付中,使用Uploadify进行文件上传。

    Uploadify官方网址地址是:
可满意项目开荒需求。

图片 1

   
下载地址:
版本音信如下:

图片 2

    解压之后,目录构造如下(不在详细表明):

图片 3

后生可畏、jquery uploadify自告奋勇:

2、使用流程

    下载的顺序是PHP示例,由于体系采纳的是asp.net
mvc,使用uploadify可分以下步骤:

  • (1)插足uploadify
    js类库(把uploadify相关js类库援用到花色的有关岗位,比方放到scripts目录)
  • (2)对uploadify二次举行李包裹装,满足项目调用
  • (3)编写文件上传管理办法
  • (4)页面引用相关类库并编辑上传脚本

、我们好,作者是jquery插件大家族中担负落到实处异步上传的插件,笔者不是唯大器晚成,只是较好用的朝气蓬勃款。

2.1 对uploadify二遍实行李包裹装

    针对uploadify调用实行js类库封装,满足项目接收:

    //转换成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

            width: 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性情,要登陆之后本领实行理文件件上传:

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

在服务器端协理各类语言与之相称使用,诸如PHP,.NET,Java……

2.3 页面调用

<!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>

    允许程序,分界面如下:

图片 4

    接受文件—>初始上传:

图片 5

图片 6

    ok,到此已经完结。

透过参数可布置上传文件类型及大小节制

3、http 302技术方案

    很嫌疑二八规格,十分的快就现身了。同事用firefox实行测验,蒙受如下提示:

图片 7

   
查找大批量质地,发下是Upload方法求证的难点,去掉[Authorize]品质标签就可以,代码改善如下:

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测量检验如下:

图片 8

图片 9

透过参数可配备是还是不是选用文件后自行上传

4、注意事项

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

    2、upload里面包车型地铁报到认证是透过判别当前账号音信是还是不是为null

   
3、本项目选取的abp框架,有意思味的能够去理解下:

轻便增添,可决定每一步骤的回调函数

通过接口参数和CSS调节外观

Uploadify主页地址:
在该页面你能够通晓到关于她的越来越多内容。

去baidu.com,google.com search search,很多。

二、firefox下自家出故障了,是本身的难点吧?

jquery
uploadify在ie下可以健康上传,在贯彻异步上传的时候,每贰个文书在上传时都会交到给服务器二个伸手。各样央浼都亟待安全认证,session和cookie的校验。是的,正是那样。由于jquery
uploadify是依靠flash来实现上传的,每一次向后台发送数据流央浼时,ie会自动把地方cookie存款和储蓄捆绑在同盟发送给服务器。但firefox、chrome不会那样做,他们会认为那样不安全。哈,那正是原因。

找到原因了,在让大家来精通多少个概念:

Session又称之为会话状态,是Web系统中最常用的事态,用于保养和方今浏览器实例相关的某个音信。例如来讲,大家能够把已报到顾客的顾客名放在Session中,那样就会因而剖断Session中的有些Key来剖断客户是不是登入,假设登入的话客商名又是有个别。

大家领略,Session对于每多少个客户端是“人手朝气蓬勃份”,顾客第一回与Web服务器建立连接的时候,服务器会给客户分发贰个SessionID作为标记。SessionID是二个由贰十个字符组成的人身自由字符串。顾客每一次提交页面,浏览器都会把那一个SessionID包括在
HTTP头中提交给Web服务器,那样Web服务器就会分别当前呼吁页面包车型大巴是哪二个顾客端。那么,ASP.NET
2.0提供了什么存款和储蓄SessionID的形式呢!

、Cookie,一时也用其复数方式Cookies,指有些网址为了鉴定区别顾客地方、举行session跟踪而积攒在客户本地终端上的多寡。

三、施工方案

1.asp.net环境下

在Global.asax文件中,编写如下代码:

void Application_BeginRequest(object sender, EventArgs e) { try { string session_param_name = "ASPSESSID"; string session_cookie_name = "ASP.NET_SessionId"; if (HttpContext.Current.Request.Form[session_param_name] != null) { UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]); } else if (HttpContext.Current.Request.QueryString[session_param_name] != null) { UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]); } } catch { } //此处是身份验证 try { string auth_param_name = "AUTHID"; string auth_cookie_name = FormsAuthentication.FormsCookieName; if (HttpContext.Current.Request.Form[auth_param_name] != null) { UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]); } else if (HttpContext.Current.Request.QueryString[auth_param_name] != null) { UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]); } } catch { } } private void UpdateCookie(string cookie_name, string cookie_value) { HttpCookie cookie = HttpContext.Current.Request.Cookies.Get; if  { cookie = new HttpCookie; } cookie.Value = cookie_value; HttpContext.Current.Request.Cookies.Set;//重新设定请求中的cookie值,将服务器端的session值赋值给它 }

/*—————————Aspx页面端代码———————————*/

 this.hfAuth.Value = Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value; this.hfAspSessID.Value = Session.SessionID;

把session值及地位验证值保存到用户端控件中,然后您就足以经过js获取那八个值,然后传给上边包车型客车插件js起先化程序。

(之所以选取将session值放入到控件中存款和储蓄,也是怕客商端禁用cookie的盘算。卡塔尔(英语:State of Qatar)

/*—————————–以下是js代码———————————-*/

 InitUpload: function { $.uploadify({ uploader: 'Scripts/jqueryplugins/Infrastructure/uploadify.swf', script: 'Handlers/ResourceHandler.ashx?OpType=UploadResource', cancelImg: 'Scripts/jqueryplugins/Infrastructure/cancel.png', queueID: 'fileQueue', sizeLimit: '21480000000', wmode: 'transparent ', fileExt: '*.zip,*.jpg, *.rar,*.doc,*.docx,*.xls,*.xlsx,*.png,*.pptx,*.ppt,*.pdf,*.swf,*.txt', auto: false, multi: true, scriptData: { ASPSESSID: AspSessID, AUTHID: auth },

………..//越来越多配备项,您能够查看官方配置文书档案

在插件初阶化的时候,把地面记录下来的session值,以至身份验证值传给伊始化方法,举办参数赋值,那样,每一遍异步央求上传文件的时候,相应的
session值就含有在伸手文件中了。

上述是asp.net下的消逝措施,那么C#中应有何管理呢?

自家是那样化解的,那样全部上传文件的代码都无需匡正,改造量最小,可是有安全隐患:

if (this.LoginInfo == null){ // 解决uploadify兼容火狐谷歌浏览器上传问题 // 但是,此代码使系统有安全隐患,Flash程序请求该系统不需要验证 // 要解决此安全隐患,需要Flash程序传用户名和密码过来验证,但是该用户名和密码不能写在前端以便被不法用户看到 if (Request.UserAgent == "Shockwave Flash") { return; } else { filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" }); return; }}

小编们的系统是ASP.NET
MVC的,虽说通过加密的法子得以让顾客看不到敏感消息,但恶意客户无需把敏感新闻解密出来就可绕过系统验证。

证实音信不能够一直写前台,能够用ajax从后台获取验证消息,然后传给flash,然后在拦截器中表明。

ajax央浼后台获取顾客名,传给flash

$ { $.ajax({ url: "/Auth/Account/GetUserNamePwd", type: "POST", dataType: "json", data: {}, success: function  { $.uploadify({ height: 25, width: 100, swf: '/Content/Plugins/UploadifyJs/uploadify.swf', uploader: 'UploadFile', formData: { userName: data.data.userName, //ajax获取的用户名 pwd: data.data.pwd //ajax获取的密码 }, buttonText: '选择文件上传', fileSizeLimit: '4MB', fileTypeDesc: '文件', fileTypeExts: '*.*', queueID: 'fileQueue', multi: true, onUploadSuccess: function (fileObj, data, response) { var d = eval; $(".uploadify-queue-item").find; $; $; }, onUploadError: function (event, ID, fileObj, errorObj) { if (event.size > 4 * 1024 * 1024) { alert; return; } alert; //end uploadify } });}); //end $

......if (this.LoginInfo == null){ // 解决uploadify兼容火狐谷歌浏览器上传问题 // 但是,此代码使系统有安全隐患,Flash程序请求该系统不需要验证 // 要解决此安全隐患,需要Flash程序传用户名和密码过来验证,但是该用户名和密码不能写在前端以便被不法用户看到 if (Request.UserAgent == "Shockwave Flash") { string userName = Request.Params["userName"]; string pwd = Request.Params["pwd"]; if (!string.IsNullOrWhiteSpace && !string.IsNullOrWhiteSpace { AuthDAL authDAL = new AuthDAL(); sys_user user = authDAL.GetUserInfoByName; if (user != null && user.password == pwd) { return; } } } else { filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" }); return; }}......

 //&#29992;&#26469;&#35745;&#31639;&#19978;&#20256;&#25104;&#21151;&#30340;&#22270;&#29255;&#25968;var successCount = 1;$ {var uploadUrl = '&lt;%=basePath%&gt;/uploadresource.do;jsessionid=&lt;%=sessionid%&gt;&amp;#63;Func=uploadwallpaper2Dfs';var swfUrl2 = "&lt;%=basePath%&gt;/webcontent/resourceManage/wallpapaer/uploadify/uploadify.swf"; $.uploadify({ 'swf' : swfUrl2, 'uploader' : uploadUrl, // Put your options here 'removeCompleted' : false, 'auto' : false, 'method' : 'post', 'onUploadSuccess' : function { add2SuccessTable;/** * &#23558;&#25104;&#21151;&#19978;&#20256;&#30340;&#22270;&#29255;&#23637;&#31034;&#20986;&#26469; */function add2SuccessTable{var jsonObj = JSON.parse;for(var i =0; i &lt; jsonObj.length; i++){var oneObj = jsonObj[i];var fileName = oneObj.fileName;var imgUrl = oneObj.imgUrl;var td_FileName = "&lt;td&gt;"+fileName+"&lt;/td&gt;";var td_imgUrl = "&lt;td&gt;&lt;img width='150' src='"+imgUrl+"'&gt;&lt;/td&gt;";var oper = "&lt;td&gt;&lt;input type='button' value='&#21024;&#38500;' onclick='deleteRow'/&gt;&lt;/td&gt;";var tr = "&lt;tr id='row"+successCount+"'&gt;"+successCount+td_FileName+td_imgUrl+oper+"&lt;/tr&gt;";$.append;successCount++;}}function deleteRow.empty.remove();}Insert title here 开始上传取消所有上传 
文件名 图片 操作

总结

归纳的说,最后的消除办法正是可以在各类援引的公文前面加个随机数,让它每一回供给都带个参数,该难题则自动扼杀

相关文章