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可分以下步骤:
"htmlcode">
//转换成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"&fileexts=" + encodeURIComponent(fileexts) + "&" + (options !== undefined ""), // 服务器端处理地址 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
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="/UploadFiles/2021-04-02/jquery-2.1.4.min.js">允许程序,界面如下:
选择文件—>开始上传:
ok,到此已经完成。
3、http 302解决方案
很怀疑二八原则,很快就出现了。同事用firefox进行测试,遇到如下提示:
查找大量资料,发下是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测试如下:
4、注意事项
1、封装的js类库适合单文件上传
2、upload里面的登录认证是通过判断当前账号信息是否为null
3、本项目使用的abp框架,有兴趣的可以去了解下:http://www.aspnetboilerplate.com/
以上所述是小编给大家介绍的jQuery.uploadify文件上传组件实例讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】