ca881亚洲城:uploadify上传插件使用详解,Jquery上传插件

合法地址:

Uploadify是JQuery的叁个上传插件,完毕的效果至极不错,带进度展现。可是官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也足以点击上面的链接进行身体力行或下载。
首先按下边的步调来落到实处三个简易的上传作用。

Jquery uploadify上传插件使用详解,jqueryuploadify

Uploadify是JQuery的二个上传插件,落成的坚守非常正确,带进度展现。可是官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也足以点击上面包车型大巴链接进行身先士卒或下载。
第一按上面包车型地铁手续来贯彻四个大约的上传效能。

1
创造Web项目,命名字为JQueryUpload德姆o,从官英特网下载最新的版本解压后增加到项目中。

2 在档期的顺序中增加UploadHandler.ashx文件用来管理公事的上传。

3 在品种中增多UploadFile文件夹,用来存放在上传的公文。

进展完上边三步后项指标主旨结构如下图:

ca881亚洲城 1

4 Default.aspx的html页的代码修改如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Uploadify</title>
 <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
  rel="stylesheet" type="text/css" />
 <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
  rel="stylesheet" type="text/css" />

 <script type="text/javascript"
  src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

 <script type="text/javascript"
  src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

 <script type="text/javascript"
 src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

 <script type="text/javascript">
  $(document).ready(function()
  {
   $("#uploadify").uploadify({
    'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
    'script': 'UploadHandler.ashx',
    'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
    'folder': 'UploadFile',
    'queueID': 'fileQueue',
    'auto': false,
    'multi': true
   });
  }); 
 </script>

</head>
<body>
 <div id="fileQueue"></div>
 <input type="file" name="uploadify" id="uploadify" />
 <p>
  <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
  <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
 </p>
</body>
</html>

5  UploadHandler类的ProcessRequest方法代码如下:

public void ProcessRequest(HttpContext context)
{
 context.Response.ContentType = "text/plain"; 
 context.Response.Charset = "utf-8"; 

 HttpPostedFile file = context.Request.Files["Filedata"]; 
 string uploadPath = 
  HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; 

 if (file != null) 
 { 
  if (!Directory.Exists(uploadPath)) 
  { 
   Directory.CreateDirectory(uploadPath); 
  } 
  file.SaveAs(uploadPath + file.FileName); 
  //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
  context.Response.Write("1"); 
 } 
 else 
 { 
  context.Response.Write("0"); 
 } 
}

6 运营后效果如下图:

ca881亚洲城 2

7
选择了几个公文后,点击上传,就能够见见UploadFile文件夹中会扩展那八个文本。

地点轻便地促成了一个上传的功能,依据函数uploadify完毕,uploadify函数的参数为json格式,能够对json对象的key值的改造来开展自定义的设置,如multi设置为true或false来支配是或不是足以拓宽多文本上传,下边就来介绍下那一个key值的意味:

uploader : uploadify.swf
文件的相对路线,该swf文件是多少个满含文字BROWSE的按键,点击后脱离展开文件对话框,私下认可值:uploadify.swf。
script :   后台管理程序的相持路线 。私下认可值:uploadify.php
checkScript
:用来判定上传选用的文书在服务器是还是不是留存的后台管理程序的相对路线
fileDataName
:设置一个名字,在服务器管理程序中根据该名字来取上传文件的数据。默以为Filedata
method : 提交情势Post 或Get 私下认可为Post
scriptAccess
:flash脚本文件的寻访形式,如若在地面测量试验设置为always,暗许值:sameDomain 
folder :  上传文件存放的目录 。
queueID : 文件队列的ID,该ID与贮存文件队列的div的ID一致。
queueSizeLimit : 当允许多文文士成时,设置选取文件的个数,私下认可值:999

multi : 设置为true时得以上传几个公文。
auto :
设置为true当选拔文件后就直接上传了,为false需求点击上传按键才上传 。
fileDesc :
那些属性值必需安装fileExt属性后才使得,用来安装选拔文件对话框中的提醒文本,如设置fileDesc为“请采取rar
doc pdf文件”,展开文件选用框效果如下图:

ca881亚洲城 3

fileExt : 设置能够选用的文书的品种,格式如:’*.doc;*.pdf;*.rar’ 。
sizeLimit : 上传文件的轻重限制 。
simUploadLimit : 允许同偶然候上传的个数 私下认可值:1 。
buttonText : 浏览按键的文书,暗中同意值:BROWSE 。
buttonImg : 浏览开关的图形的路线 。
hideButton : 设置为true则隐敝浏览按键的图片 。
rollover :
值为true和false,设置为true时当鼠标移到浏览按键上时有反转效果。
width : 设置浏览按键的上涨的幅度 ,暗中同意值:110。
height : 设置浏览按键的莫斯中国科学技术大学学 ,私下认可值:30。
wmode : 设置该项为transparent
能够使浏览开关的flash背景文件透明,何况flash文件会被置为页面包车型地铁最高层。
暗中同意值:opaque 。
cancelImg :选取文件到文件队列中后的每三个文本上的关闭开关Logo,如下图:

ca881亚洲城 4

地点介绍的key值的value都为字符串或是布尔类型,相比轻便,接下去要介绍的key值的value为叁个函数,能够在甄选文件、出错或其余部分操作的时候回来一些音讯给客户。

onInit : 做一些早先化的劳作。

onSelect :选拔文件时接触,该函数有八个参数

event:事件目的。
queueID:文件的独一标志,由6为随意字符组成。
fileObj:采用的公文对象,有name、size、creationDate、modificationDate、type
5个性情。
代码如下:

$(document).ready(function()
{
  $("#uploadify").uploadify({
    'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
    'script': 'UploadHandler.ashx',
    'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
    'folder': 'UploadFile',
    'queueID': 'fileQueue',
    'auto': false,
    'multi': true,
    'onInit':function(){alert("1");},
    'onSelect': function(e, queueId, fileObj)
    {
      alert("唯一标识:" + queueId + "\r\n" +
         "文件名:" + fileObj.name + "\r\n" +
         "文件大小:" + fileObj.size + "\r\n" +
         "创建时间:" + fileObj.creationDate + "\r\n" +
         "最后修改时间:" + fileObj.modificationDate + "\r\n" +
         "文件类型:" + fileObj.type
      );

    }
  });
}); 

 当选拔四个文本后弹出的音信如下图:

ca881亚洲城 5

onSelectOnce
在单文件或多文件上传时,选用文件时接触。该函数有多个参数event,data,data对象有以下多少个特性:

  • fileCount:采用文件的总和。
  • filesSelected:同一时候采取文件的个数,假设贰次接纳了3个文件该属性值为3。
  • filesReplaced:若是文件队列中早就存在A和B五个文本,再一次选取文件时又选拔了A和B,该属性值为2。
  • allBytesTotal:全体选拔的文书的总大小。

onCancel :
当点击文件队列中文件的关门开关或点击撤消上传时触发。该函数有event、queueId、fileObj、data八个参数,前七个参数同onSelect
中的四个参数,data对象有五个属性fileCount和allBytesTotal。

  • fileCount:撤消三个文书后,文件队列中多余文件的个数。
  • allBytesTotal:撤除二个文本后,文件队列中剩下文件的尺寸。

onClearQueue
当调用函数fileUploadClearQueue时触发。有event和data七个参数,同onCancel
中的八个照管参数。

onQueueFull
当设置了queueSizeLimit而且选择的文件个数超过了queueSizeLimit的值时接触。该函数有四个参数event和queueSizeLimit。

onError
当上传进度中发生错误时接触。该函数有event、queueId、fileObj、errorObj多个参数,其中前多个参数同上,errorObj对象有type和info多个个性。

  • type:错误的类型,有三种‘HTTP’, ‘IO’,
    or ‘Security’
  • info:错误的叙述

onOpen
点击上传时触发,假诺auto设置为true则是选用文件时接触,假使有多个公文上传则遍历整个文件队列。该函数有event、queueId、fileObj四个参数,参数的解说同上。

onProgress
ca881亚洲城:uploadify上传插件使用详解,Jquery上传插件。点击上传时触发,如若auto设置为true则是选项文件时接触,纵然有多个公文上传则遍历整个文件队列,在onOpen然后触发。该函数有event、queueId、fileObj、data三个参数,前多个参数的演讲同上。data对象有多个属性percentage、bytesLoaded、allBytesLoaded、speed:

  • percentage:当前到位的比重
  • bytesLoaded:当前上传的大小
  • allBytesLoaded:文件队列中一度上传完的分寸
  • speed:上传速率 kb/s

onComplete:文件上传完结后触发。该函数有八个参数event、queueId、fileObj、response、data多个参数,前七个参数同上。response为后台管理程序再次回到的值,在地方的例证中为1或0,data有四个属性fileCount和speed

  • fileCount:剩余未有上传实现的文书的个数。
  • speed:文件上传的平分速率 kb/s

注:fileObj对象和方面讲到的略微不太一样,onComplete
的fileObj对象有个filePath属性能够抽出上传文件的路径。

onAllComplete:文件队列中兼有的文书上传达成后触发。该函数有event和data七个参数,data有四本性子,分别为:

  • filesUploaded :上传的保有文件个数。
  • errors :出现错误的个数。
  • allBytesLoaded
    :全数上传文件的总大小。
  • speed :平均上传速率 kb/s

连带函数介绍

在上头的例子中曾经用了uploadifyUpload和uploadifyClearQueue多个函数,除外还会有多少个函数:

uploadifySettings:能够动态修改上边介绍的这一个key值,如下边代码

$('#uploadify').uploadifySettings('folder','JS');

一旦上传按键的事件写成上边那样,文件将会上流传uploadifySettings定义的目录中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');
$('#uploadify').uploadifyUpload()">上传</a>

uploadifyCancel:该函数接受三个queueID作为参数,能够收回文件队列中钦命queueID的文本。

$('#uploadify').uploadifyCancel(id);

算是写完了,对JQuery这一个上传插件也基本理解了,希望对我们具备支持,不对之处还望我们指正。

剧本之家提供的下载地址://www.jb51.net/jiaoben/21484.html

1
成立Web项目,命名称叫JQueryUpload德姆o,从官英特网下载最新的本子解压后增多到项目中。

您恐怕感兴趣的作品:

  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
  • JQuery上传插件Uploadify使用详解及错误管理
  • Jquery Uploadify多文件上传带进程条且传递温馨的参数
  • 详解jquery uploadify 上传文件
  • 图表上传插件jquery.uploadify详解
  • Jquery uploadify图片上传插件不恐怕上传的消除格局
  • Jquery Uploadify上传带进程条的粗略实例
  • jquery uploadify和apache Fileupload完毕异步上传文件示例
  • jQuery文件上传插件Uploadify使用指南

uploadify上传插件使用详解,jqueryuploadify
Uploadify是JQuery的贰个上传插件,达成的功力十分正确,带进程展现。可是官方提供的实例时p…

法定意大利共和国语文书档案:

2 在项目中增添UploadHandler.ashx文件用来拍卖文件的上传。

使用办法(.net版本):

3 在等级次序中加多UploadFile文件夹,用来贮存在上传的公文。

前台JS

实行完上边三步后项指标为主组织如下图:

复制代码 代码如下:

ca881亚洲城 6

$(“#id”).uploadify({
height: 30,
swf: ‘/uploadify/uploadify.swf’,
uploader: ‘/Handler/uploadPic.ashx’,
width: 120,
cancelImg: ‘/uploadify/uploadify-cancel.png’,
buttonText: ‘选用图片’,
fileTypeExts: ‘*.gif;*.jpg;*.jpeg;*.png’,
‘fileSizeLimit’: ‘6000KB’,
removeCompleted: false,
‘formData’: {
“id”:”1″
},
onUploadSuccess: function (file, data, response)
{//上传完结时接触(各样文件触发一遍)
if (data.indexOf(‘错误提醒’) > -1) {
alert(data);
}
else {
//$(“#previewImage”).attr(“src”, data.substr(2)).hide().fadeIn(2000);
alert(“上传成功!”);
}
},
‘onUploadError’: function (file, errorCode, errorMsg, errorString)
{//当单个文件上传来错开上下班时间触发
alert(‘文件:’ + file.name + ‘ 上传退步: ‘ + errorString);
} });

4 Default.aspx的html页的代码修改如下:

ASHX文件:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Uploadify</title>
 <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
  rel="stylesheet" type="text/css" />
 <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
  rel="stylesheet" type="text/css" />

 <script type="text/javascript"
  src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

 <script type="text/javascript"
  src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

 <script type="text/javascript"
 src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

 <script type="text/javascript">
  $(document).ready(function()
  {
   $("#uploadify").uploadify({
    'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
    'script': 'UploadHandler.ashx',
    'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
    'folder': 'UploadFile',
    'queueID': 'fileQueue',
    'auto': false,
    'multi': true
   });
  }); 
 </script>

</head>
<body>
 <div id="fileQueue"></div>
 <input type="file" name="uploadify" id="uploadify" />
 <p>
  <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
  <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
 </p>
</body>
</html>

复制代码 代码如下:

5  UploadHandler类的ProcessRequest方法代码如下:

protected string AllowExt =
“7z|aiff|asf|avi|bmp|csv|doc|docx|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp4|VCD|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pptx|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xlsx|xml|zip”;//支持的文件格式
int File马克斯Size = 10240;//文件大小,单位为Kpublicvoid
ProcessRequest(HttpContext context)
{
context.Response.ContentType = “text/plain”;
string ParentID = context.Request.Params[“id”];
HttpPostedFile fileUpload = context.Request.Files[0];
if (fileUpload != null)
{
try
{
string UploadDir = “~/upload/”;//图片保存的文书夹
//图片保存的公文夹路线
string path = context.Server.MapPath(UploadDir);
//天天上传的图片三个文件夹
string folder = DateTime.Now.ToString(“yyyyMM”);
//假诺文件夹空头支票,则成立
if (!Directory.Exists(path + folder))
{
Directory.CreateDirectory(path + folder);
}
//上传图片的扩展名
string fileExtension =
fileUpload.FileName.Substring(fileUpload.FileName.LastIndexOf(‘.’));
//剖断文件格式
if (!CheckValidExt(fileExtension))
{
context.Response.Write(“错误提醒:文件格式不正确!” + fileExtension);
return;
}
//决断文件大小
if (fileUpload.ContentLength > FileMaxSize * 1024)
{
context.Response.Write(“错误提醒:上传的文件(” + fileUpload.FileName +
“)当先最大面积:” + File马克斯Size + “KB”);
return;
}
//保存图片的文件名
//string saveName = Guid.NewGuid().ToString() + fileExtension;
//使用时间+随机数重命名文件
string strDateTime =
DateTime.Now.ToString(“yyMMddhhmmssfff”);//获得时间字符串
Random ran = new Random();
string strRan = Convert.ToString(ran.Next(100, 999));//生成四位随机数
string saveName = strDateTime + strRan + fileExtension;
Model.Album uc = new Model.Album();
uc.Title = fileUpload.FileName;
uc.ImagePath = folder + “/” + saveName;
uc.PostTime = DateTime.Now;
uc.Pid= int.Parse(id);
bll.Album alb = new bll.Album();
alb.add(uc);
//保存图片
fileUpload.SaveAs(path + folder + “/” + saveName);
context.Response.Write(UploadDir + folder + “/” + saveName);
}
catch
{
context.Response.Write(“错误提醒:上传失利”);
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
#region 检查实验扩充名的管事 bool CheckValidExt(string sExt)
/// <summary>
/// 检查测试扩充名的平价
/// </summary>
/// <param name=”sExt”>文件名扩张名</param>
///
<returns>假使增加名有效,再次来到true,不然重返false.</returns>
public bool CheckValidExt(string strExt)
{
bool flag = false;
string[] arrExt = AllowExt.Split(‘|’);
foreach (string filetype in arrExt)
{
if (filetype.ToLower() == strExt.ToLower().Replace(“.”, “”))
{
flag = true;
break;
}
}
return flag;
}
#endregion

public void ProcessRequest(HttpContext context)
{
 context.Response.ContentType = "text/plain"; 
 context.Response.Charset = "utf-8"; 

 HttpPostedFile file = context.Request.Files["Filedata"]; 
 string uploadPath = 
  HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; 

 if (file != null) 
 { 
  if (!Directory.Exists(uploadPath)) 
  { 
   Directory.CreateDirectory(uploadPath); 
  } 
  file.SaveAs(uploadPath + file.FileName); 
  //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
  context.Response.Write("1"); 
 } 
 else 
 { 
  context.Response.Write("0"); 
 } 
}

参数表达:
参考
//www.jb51.net/article/30598.htm
3.1 版本更新 : 去除postData,更换为formData。 Json数据。
别的改造切磋中。
上传文件生成缩略图突显到网页功用商量ing。

6 运维后效果如下图:

你大概感兴趣的篇章:

  • 采取ThinkPHP+Uploadify完毕图片上传功效
  • jQuery文件上传插件Uploadify使用指南
  • asp.net使用jQuery
    Uploadify上传附属类小部件示例
  • asp.net(c#)开拓中的文件上传组件uploadify的利用办法(带进程条)
  • uploadify 3.0 详细使用验证
  • 基于MVC4+EasyUI的Web开荒框架之附属类小部件上传组件uploadify的选择

ca881亚洲城 7

7
采纳了多个文件后,点击上传,就足以看看UploadFile文件夹中会扩充那四个公文。

上边轻便地贯彻了三个上传的功能,依附函数uploadify完成,uploadify函数的参数为json格式,能够对json对象的key值的修改来举办自定义的安装,如multi设置为true或false来决定是还是不是能够举行多文本上传,下边就来介绍下那些key值的情致:

uploader : uploadify.swf
文件的相对路线,该swf文件是多个包含文字BROWSE的按钮,点击后退出展开文件对话框,私下认可值:uploadify.swf。
script :   后台管理程序的相对路线 。暗中同意值:uploadify.php
checkScript
:用来剖断上传选取的文本在服务器是不是存在的后台管理程序的相对路线
fileDataName
:设置二个名字,在服务器管理程序中根据该名字来取上传文件的多寡。默以为Filedata
method : 提交情势Post 或Get 默感到Post
scriptAccess
:flash脚本文件的拜谒方式,如若在地头测量检验设置为always,默许值:sameDomain 
folder :  上传文件存放的目录 。
queueID : 文件队列的ID,该ID与贮存文件队列的div的ID一致。
queueSizeLimit : 当允许多文雅士成时,设置选用文件的个数,默许值:999

multi : 设置为true时可以上传三个文件。
auto :
设置为true当选拔文件后就间接上传了,为false要求点击上传开关才上传 。
fileDesc :
那几个属性值必得设置fileExt属性后才有效,用来安装采纳文件对话框中的提醒文本,如设置fileDesc为“请接纳rar
doc pdf文件”,张开文件选用框效果如下图:

ca881亚洲城 8

fileExt : 设置可以采纳的公文的种类,格式如:’*.doc;*.pdf;*.rar’ 。
sizeLimit : 上传文件的轻重缓急限制 。
simUploadLimit : 允许同一时间上传的个数 私下认可值:1 。
buttonText : 浏览按键的文件,暗许值:BROWSE 。
buttonImg : 浏览按键的图片的路线 。
hideButton : 设置为true则掩盖浏览开关的图片 。
rollover :
值为true和false,设置为true时当鼠标移到浏览按键上时有反转效果。
width : 设置浏览按键的宽窄 ,暗许值:110。
height : 设置浏览按键的冲天 ,默许值:30。
wmode : 设置该项为transparent
能够使浏览按键的flash背景文件透明,并且flash文件会被置为页面的最高层。
暗中认可值:opaque 。
cancelImg :选拔文件到文件队列中后的每二个文书上的停业开关Logo,如下图:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图