jquery Uploadify上传文件

jquery Uploadify上传文件,第1张

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

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

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

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

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

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

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

一、相关key值介绍

uploader:uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。

script:后台处理程序的相对路径 。默认值:uploadify.php

scriptData:上传到后台的参数,参数为json格式。

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文件”,打开文件选择。

fileExt:设置可以选择的文件的类型,笑基判格式如:'*.doc*.pdf*.rar'。

sizeLimit:上传文件的大小限制 。

simUploadLimit:允许同时上传的个数 默认值:1。

buttonText:浏览按钮的文本,默认值:BROWSE。

buttonImg:浏览按钮的图片的路径。

hideButton:设置为true则隐藏浏览按钮的图片。

需要设置webconfig里面的值。

<httpRuntimemaxRequestLengthhttpRuntimemaxRequestLength="1048576"

executionTimeout="3600"/>

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:

支持单文件或多文件上传,可控制并发上传的文件数。

在服务器端支持各种语言逗镇与之配合使用,诸如PHP,.NET,Java……。

通过参数可配置上传文件类型及大小限制。

通过参数可配置是否选早拍择文件后自山睁粗动上传。

易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)。

通过接口参数和CSS控制外观。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12197882.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存