asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）
上文件传很常见，现在就文件上传利用HTML的File控件(uploadify)的，这里为大家介绍一下（uploadify）的一些使用方法。在目前Web开发中用的比较多的，可能uploadify（参考http://www.uploadify.com/）也算一个吧，不过这个版本一直在变化，他们的脚本调用也有很大的不同，甚至调用及参数都一直在变化，很早的时候，那个Flash的按钮文字还没法变化，本篇随笔主要根据项目实际，介绍一下3.1版本的uploadify的控件使用，这版本目前还是最新的，因此对我们做Web开发来说，有一定的参考性。
这个控件有很多参数控制，以及事件的处理响应，相对来说也比较好用。参数控制可以控制上传文件多选、文件类型、文件大小、文件数量、检查文件是否存在，以及一些按钮参数的控制，如文字、高度、宽度等，对提交文件成功与否、完成操作、取消、停止上传等等都有控制，他们的帮助文档也写得比较完善，不过就是各个版本的方法参数完全不同了，但控件是一个好控件。
控件的使用首先要加入必备的脚本类库，由于该控件是利用了Jquery的功能，因此还需要应用Jquery脚本文件，如下所示。
<script src="http://www.jb51.net/JQuery/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="http://www.jb51.net/JQueryTools/uploadify/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<link href="http://www.jb51.net/JQueryTools/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
配置控件的一些参数，以及相应的处理事件，如下所示。
<script language="javascript" type="text/javascript">
$(function () {
var guid = '<%=Request["guid"] %>';
var type = '<%=Request["type"] %>';
if (guid == null || guid == "") {
guid = newGuid();
}
if (type != null) {
type = type + '/';
}
$('#file_upload').uploadify({
'swf': 'uploadify.swf', //FLash文件路径
'buttonText': '浏 览', //按钮文本
'uploader': 'uploadhandler.ashx?guid=' + guid, //处理ASHX页面
'formData' : { 'folder' : 'picture' }, //传参数
'queueID': 'fileQueue', //队列的ID
'queueSizeLimit': , //队列最多可上传文件数量，默认为999
'auto': false, //选择文件后是否自动上传，默认为true
'multi': true, //是否为多选，默认为true
'removeCompleted': true, //是否完成后移除序列，默认为true
'fileSizeLimit': '10MB', //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': 'Image Files', //文件描述
'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp', //上传的文件后缀过滤器
'onQueueComplete': function (event, data) { //所有队列完成后事件
//ShowUpFiles(guid, type, show_div);
alert("上传完毕！");
},
'onUploadError': function (event, queueId, fileObj, errorObj) {
alert(errorObj.type + "：" + errorObj.info);
}
});
});
function newGuid() {
var guid = "";
for (var i = ; i <= ; i++){
var n = Math.floor(Math.random()*16.0).toString();
guid += n;
if((i==)||(i==)||(i==)||(i==))
guid += "-";
}
return guid;
}
</script>
再次提一下，这个控件不要参考网上其他的一些说明，否则可能参数及用法不正确，一定要找到对应版本的说明（本篇指的是3.1.1），最好参考该版本的在线文档。
上面的参数，我基本上都给了注释了，还有一些不是很重要的参数，这里没有列出来，需要可以参考在线文档吧。
值得提到的是，这个版本可以修改Flash里面的文字，非常棒，很讨厌以前的那个默认Browse的英文，虽然以前替代图片可以修改文字，但是还是不太好用。这个直接修改文字，非常好。
值得注意的是uploader参数，这个是我们ashx的后台处理程序，就是控件提交文件给那个页面进行保存处理，添加数据库记录等操作。
页面代码使用很简单，如下所示
<body style="margin-left:10px; margin-top:10px">
<form id="form1" runat="server" enctype="multipart/form-data">
<div id="fileQueue" class="fileQueue"></div>
<div>
<input type="file" name="file_upload" id="file_upload" />
<p>
<input type="button" class="shortbutton" id="btnUpload" onclick="javascript:$('#file_upload').uploadify('upload','*')" value="上传" /> <input type="button" class="shortbutton" id="btnCancelUpload" onclick="javascript:$('#file_upload').uploadify('cancel')" value="取消" />
</p>
<div id="div_show_files"></div>
</div>
</form>
</body>
关键是后台上传文件的保存操作了，asp.net一般采用ashx的处理页面来处理。
/// <summary>
/// 文件上传后台处理页面
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
try
{
string guid = context.Request.QueryString["guid"];
string folder = context.Request["folder"];
//LogTextHelper.Info(folder);
HttpPostedFile file = context.Request.Files["Filedata"];
if (file != null)
{
string oldFileName = file.FileName;//原文件名
int size = file.ContentLength;//附件大小 string extenstion = oldFileName.Substring(oldFileName.LastIndexOf(".") + );//后缀名
string newFileName = GetNewFileName(oldFileName);//生成新文件名
//LogTextHelper.Info(newFileName);
#region 上传到远程服务器
//FileServerManage fsw = new FileServerManage();
//string uploadFilePath = "/" + newFileName;
//if (!string.IsNullOrEmpty(folder))
//{
// uploadFilePath = string.Format("/{0}/{1}", folder, newFileName);
//}
//bool uploaded = fsw.UploadFile(file.InputStream, "/" + folder + "/" + newFileName);
#endregion
#region 本地服务器上传
AppConfig config = new AppConfig();
string uploadFiles = config.AppConfigGet("uploadFiles");
if (string.IsNullOrEmpty(uploadFiles))
{
uploadFiles = "uploadFiles";
}
if (!string.IsNullOrEmpty(folder))
{
uploadFiles = Path.Combine(uploadFiles, folder);
}
string uploadPath = Path.Combine(HttpContext.Current.Server.MapPath("/"), uploadFiles);
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string newFilePath = Path.Combine(uploadPath, newFileName);
LogTextHelper.Info(newFilePath);
file.SaveAs(newFilePath);
bool uploaded = File.Exists(newFilePath);
#endregion
if (uploaded)
{
#region 文件保存成功后，写入附件的数据库记录
//AttachmentInfo attachmentInfo = new AttachmentInfo();
//attachmentInfo.EditorTime = DateTime.Now;
//attachmentInfo.FileExtend = extenstion;
//attachmentInfo.FileName = folader + "/" + newFileName;
//attachmentInfo.OldFileName = oldFileName;
//attachmentInfo.Size = size;
//attachmentInfo.Guid = guid;
//BLLFactory<Attachment>.Instance.Insert(attachmentInfo);
#endregion
}
}
else
{
LogTextHelper.Error("上传文件失败");
}
}
catch (Exception ex)
{
LogTextHelper.Error("上传文件失败", ex);
throw;
}
}
/// <summary>
/// 获取新的名称 比如:aa.jpg转化为aa(20090504).jpg
/// </summary>
/// <param name="fileName">文件名称[aa.jpg]</param>
/// <returns>新的文件名称</returns>
public static string GetNewFileName(string fileName)
{
if (string.IsNullOrEmpty(fileName))
return string.Empty;
//文件后缀名
string extenstion = fileName.Substring(fileName.LastIndexOf(".") + );
string name = fileName.Substring(, fileName.LastIndexOf(".")) + "(" + DateTime.Now.ToFileTime() + ")";
string newFileName = name + "." + extenstion;
return newFileName;
}
public bool IsReusable
{
get
{
return false;
}
}
}
上传后打开文件夹看到的图片效果图
如果你想要比较完整代码示例，请移步 demo下载;
asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）的更多相关文章
- 分享一个FileUtil工具类，基本满足web开发中的文件上传，单个文件下载，多个文件下载的需求
获取该FileUtil工具类具体演示,公众号内回复fileutil20200501即可. package com.example.demo.util; import javax.servlet.htt ...
- Android使用HttpClient实现文件上传到PHP服务器，并监控进度条
上传 服务器端PHP 代码如下 : <?php $target_path = "./tmp/";//接收文件目录 $target_path = $target_path.($ ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
- 上传组件uploadify的使用
上传组件uploadify的使用 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用& ...
- 基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
- （转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...
- ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件，并在文件上传后清空文件
前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...
- javaWeb中的文件上传下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
- javaWeb中，文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
随机推荐
- 【mlflow】打包：npm run build + python setup.py sdist
mlflow是一个开源机器学习平台 最近需要使用一个它的最新版本,但是这个最新版本没有git包,无法通过pip install安装,需要打包安装. 打包完之后在项目的dist文件夹中有打包后的压缩包, ...
- 【css a标签 鼠标悬浮时变手型】
<a href="#" style="cursor:pointer">
- webdriver js点击无法点击的元素
原文地址https://blog.csdn.net/galen2016/article/details/56847545 [WebDriver]调用JavaScript 一.WebDriver 提供了 ...
- 6.2 Controllers -- Representing Multipe Models
1. 一个controller的model可以代表几个记录也可以代表单个.这里,路由的model hook返回一个歌曲数组: app/routes/songs.js export default Em ...
- CentOS禁用笔记本touchpad
自己在家笔记本装来个双系统玩玩,发现触摸板很烦人,禁用! 1.安装一个小神器 yum install xorg-x11-apps 2.查看你到输入硬件对应的id,方便禁用命令 [root@huangz ...
- Win7系统（台式机）设置系统的窗口背景色（豆沙绿色）
Win7系统(台式机)设置系统的窗口背景色(豆沙绿色) 1,桌面->右键->个性化->窗口颜色->高级外观设置->项目选择(窗口).颜色1(L)选择(其它)将色调改为:8 ...
- GreenOpenPaint的实现（三）添加标尺
标尺对于图像处理程序,特别是需要精确测量的程序来说意义很大.这里进行了专门的研究. 基于现在已经引入的类和定义的变量,主要讲一讲如何调用. 1.添加放大缩小 void CGreenOpenPaintD ...
- Android实践项目汇报
Android实践项目:推箱子 推箱子是一款来自日本的古老游戏,其设计目的是训练人的逻辑思维能力.游戏场景一般是设定在空间狭小的仓库中,要求把箱子摆放到指定位置.这就要求玩家巧妙的运用有限的空间和通道 ...
- FromBottomToTop第十三周项目博客
FromBottomToTop第十三周项目博客 本周项目计划 完成游戏核心算法以及界面相关类和怪物类 项目进展 用户可选择游戏模式,共有20张不同的地图. 炮台的建立和升级. 小怪的路径算法. 参考资 ...
- 《Effective Java 2nd》第7章 方法
目录 第38条 检查参数的有效性 第39条 必要时进行保护性拷贝 第40条 谨慎设计方法签名 第41条 慎用重载 第42条 慎用可变参数 第43条 返回零长度的数组或集合,而不是null 第44条 为 ...