jquery上传插件 uploadify 的使用

最新推荐文章于 2019-08-20 15:04:36 发布

三井学长

最新推荐文章于 2019-08-20 15:04:36 发布

阅读量971

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/david1030/article/details/8183073

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先，设置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");
            }
        }
    }
}

网站架构如下图：