开发学院网页设计JavaScript JQuery上传插件Uploadify使用详解 阅读

JQuery上传插件Uploadify使用详解

 2010-01-07 00:00:00 来源:WEB开发网   
核心提示:Uploadify是JQuery的一个上传插件,实现的效果非常不错,JQuery上传插件Uploadify使用详解,带进度显示,不过官方提供的实例时php版本的,2 在项目中添加UploadHandler.ashx文件用来处理文件的上传,3 在项目中添加UploadFile文件夹,本文将详细介绍Uploadify在As

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。

官方下载

官方文档

官方演示

首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹,用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

JQuery上传插件Uploadify使用详解

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>

1 2 3 4 5 6  下一页

Tags:JQuery 上传 插件

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读