jquery上传插件 uploadify 的使用

来源：互联网发布：ConcurrentHashMap源码编辑：程序博客网时间：2024/06/08 13:46

首先，设置Web.Config

<?xml version="1.0" encoding="utf-8"?><configuration>      <appSettings/>    <connectionStrings/>      <system.web>        <!--             设置 compilation debug="true" 将调试符号插入            已编译的页面中。但由于这会             影响性能，因此只在开发过程中将此值             设置为 true。        -->        <compilation debug="true" />        <!--            通过 <authentication> 节可以配置 ASP.NET 使用的             安全身份验证模式，            以标识传入的用户。         -->        <authentication mode="Windows" />        <!--            如果在执行请求的过程中出现未处理的错误，            则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，            开发人员通过该节可以配置            要显示的 html 错误页            以代替错误堆栈跟踪。        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">            <error statusCode="403" redirect="NoAccess.htm" />            <error statusCode="404" redirect="FileNotFound.htm" />        </customErrors>        --><httpRuntime maxRequestLength="2097151" executionTimeout="50000" />    </system.web></configuration>

然后，上传页面

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication2._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>jquery.uploadify 上传插件的使用</title>    <link rel="Stylesheet" href="js/uploadify.css" />    <script type="text/javascript" src="js/jquery.min.js"></script>    <script type="text/javascript" src="js/swfobject.js"></script>    <script type="text/javascript" src="js/jquery.uploadify.min.js"></script>    <script type="text/javascript">       $(document).ready(function() {            $("#uploadify").uploadify({                'uploader': 'js/uploadify.swf',                'script': 'Upload.aspx',                'cancelImg': 'js/cancel.png',                'folder': 'upload',                'queueID': 'fileQueue',                'sizeLimit': 104857600, //上传文件最多100M                'buttonText' :'Select File',                'auto': false,                'multi': true,                           });            $("#uploadbtn").click(function(){                                $('#uploadify').uploadifyUpload();            });            $("#cancelbtn").click(function(){                                 $('#uploadify').uploadifyClearQueue();            });        });              </script></head><body>    <form id="form1" runat="server">        <input type="file" name="uploadify" id="uploadify" />        <input type="button" id="uploadbtn" value="上传"/>|        <input type="button" id="cancelbtn" value="取消" />        <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>        <div id="fileQueue"></div>    </form></body></html>

最后，上传处理页面

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.IO;namespace WebApplication2{    public partial class Upload : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {            HttpPostedFile file = Request.Files["FileData"];            string uploadpath = Server.MapPath(Request["folder"] + "\\");            if (file != null)            {                if (!Directory.Exists(uploadpath))                {                    Directory.CreateDirectory(uploadpath);                }                file.SaveAs(uploadpath + file.FileName);                Response.Write("1");            }            else            {                Response.Write("0");            }        }    }}

网站架构如下图：

页面显示如下图：