7
接受了五个公文后,点击上传,就能够看看UploadFile文件夹中会增加那四个文件。

你恐怕感兴趣的篇章:

  • 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…

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

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

Uploadify是JQuery的七个上传插件,达成的效率非常不错,带进程显示。然则官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也足以点击上边的链接进行现身说法或下载。
首先按上面的步骤来落实一个轻松易行的上传效用。

1
创立Web项目,命名叫JQueryUpload德姆o,从官网络下载最新的本子解压后增加到项目中。

2 在类型中增加UploadHandler.ashx文件用来拍卖公事的上传。

3 在档案的次序中增多UploadFile文件夹,用来寄存上传的文件。

开展完上边三步后项目的宗旨结构如下图:

图片 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 运转后效果如下图:

图片 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文件”,打开文件选用框效果如下图:

图片 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,如下图:

图片 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
      );

    }
  });
}); 

 当选用一个文件后弹出的音信如下图:

图片 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
点击上传时触发,借使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那些上传插件也基本了然了,希望对大家持有助于,不对之处还望大家指正。

什么是Uploadify
Uploadify是JQuery的一个上传插件,支持多文件上传,完结的魔法特别准确,带进程显示。
官方网站提供的是PHP的DEMO,在这里边自个儿详细介绍在Asp.net下的应用. 下载
脚本之家提供的Uploadify下载地址 怎么样行使 1
创立Web项目,命名称叫JQueryUploadDemo,从官英特网下载最新的本子解压后增加到项目中
2 在类型中加多UploadHandler.ashx文件用来拍卖文件的上传。 3
在项目中增加UploadFile文件夹,用来存放上传的文本。
实行完上边三步后项指标基本结构如下图: 4
Default.aspx的html页的代码校订如下:
复制代码 代码如下:

onComplete:文件上传完毕后触发。该函数有多个参数event、queueId、fileObj、response、data三个参数,前八个参数同上。response为后台管理程序重返的值,在地点的例证中为1或0,data有两天性情fileCount和speed

onAllComplete:文件队列中存有的公文上传完结后触发。该函数有event和data几个参数,data有几性格格,分别为:

onInit : 做一些初步化的办事

上传)|
废除上传)

上传)

uploadifySettings:能够动态修正上边介绍的那个key值,如上边代码

event:事件指标。 queueID:文件的唯意气风发标志,由6为随便字符组成。
fileObj:选用的文书对象,有name、size、creationDate、modificationDate、type
5个本性。

onQueueFull
:当设置了queueSizeLimit并且采取的文本个数超过了queueSizeLimit的值时接触。该函数有多少个参数event和queueSizeLimit。

6 运维后效果如下图:

uploadifyCancel:该函数选择一个queueID作为参数,能够收回文件队列中内定queueID的公文。

onCancel :
当点击文件队列汉语件的闭馆开关或点击撤除上传时触发。该函数有event、queueId、fileObj、data八个参数,前多少个参数同onSelect
中的三个参数,data对象有多少个性格fileCount和allBytesTotal。

5 UploadHandler类的ProcessRequest方法代码如下: 复制代码 代码如下: public void ProcessRequest {
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 { if (!Directory.Exists { Directory.CreateDirectory; }
file.SaveAs(uploadPath + file.FileName卡塔尔;
//上面那句代码缺少的话,上传成功后上传队列的显得不会活动消失
context.Response.Write; } else { context.Response.Write; } }
注意:这里一定要注意,应当要援引using
System.IO;命名空间,作者一差二错的由来也是在此边,网络的科目基本上都没提到那或多或少,所以有看不完网民会碰着IOError的怪诞。

百思莫解,翻遍了各大互连网,终于在国外的一网址见到了那样一句using
System.IO; 加多之茅塞顿开!!

fileCount:打消叁个文本后,文件队列中多余文件的个数。
allBytesTotal:撤销一个文件后,文件队列中剩下文件的大大小小。

onOpen
:点击上传时触发,假设auto设置为true则是筛选文件时接触,假设有三个文本上传则遍历整个文件队列。该函数有event、queueId、fileObj多个参数,参数的讲授同上。

  • “\r\n” + “文件名:” + fileObj.name + “\r\n” + “文件大小:” +
    fileObj.size + “\r\n” + “创设时间:” + fileObj.creationDate + “\r\n”
  • “最终改善时间:” + fileObj.modificationDate + “\r\n” + “文件类型:”
  • fileObj.type 卡塔尔(英语:State of Qatar); } }卡塔尔(قطر‎; }卡塔尔(英语:State of Qatar); 当选取二个文本后弹出的音信如下图:

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,如下图:

admin

相关文章

发表评论

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