uploadify多文件上传

最新推荐文章于 2018-05-04 16:21:06 发布

蓝色羽翼

最新推荐文章于 2018-05-04 16:21:06 发布

阅读量1k

点赞数

分类专栏： asp.net

本文链接：https://blog.csdn.net/zhangquanok/article/details/13767357

版权

asp.net 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

效果图：见下

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JQueryUploadDemo.WebForm1" %>

<!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 id="Head1" runat="server">
    <title>上传</title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <link href="Scripts/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.uploadify-v2.1.0/swfobject.js"></script>
    <script type="text/javascript" src="Scripts/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#uploadify").uploadify({
                'uploader': 'Scripts/jquery.uploadify-v2.1.0/uploadify.swf', // uploadify.swf 文件的相对路径
                'script': 'UploadHandler.ashx', //后台处理程序的相对路径
                'cancelImg': 'Scripts/jquery.uploadify-v2.1.0/cancel.png', //选择文件到文件队列中后的每一个文件上的关闭按钮图标
                'folder': 'UploadFile', //上传文件存放的目录
                //'queueID': 'fileQueue', //文件队列的ID，该ID与存放文件队列的div的ID一致
                'auto': false, //设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传
                'multi': true, //设置为true时可以上传多个文件
                'method': 'post', //提交方式Post 或Get 默认为Post 
                'queueSizeLimit': 4, //当允许多文件生成时，设置选择文件的个数，默认值：999 
                'simUploadLimit': 2, //允许同时上传的个数 默认值：1 
                'sizeLimit': "209715200", //上传文件大小限制，注意：同时还要在 Web.config中修改
                //'fileDesc': true, //这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本
                //'fileExt': '*.doc;*.pdf;*.rar;*.zip', //设置可以选择的文件的类型
                //'sizeLimit':102400,//上传文件的大小限制
                'buttonText': 'Browser',//浏览按钮的文本，默认值：BROWSE 
                //'buttonImg': 'Scripts/jquery.uploadify-v2.1.0/browseBtn.png', // 浏览按钮的图片的路径
                //'onInit': function () { alert("1"); }, //做一些初始化的工作，一打开网页就显示
                //                'onSelect': function (e, queueId, fileObj) {
                //                    alert("s");
                //                },
                //                'onCancel': function (e) {
                //                    alert("s");
                //                }
                'onComplete': function (file, data, response) {//文件上传完成时执行
                    var appStr = "<tr><td>" + response.name + "</td><td>" + response.type + "</td><td>" + ((response.size) / 1024).toFixed(2) + "Kb</td></tr>";
                    $("#tbInfo").append(appStr);
                }
            });
        });


    </script>

</head>
<body>
    <p>
      <a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>| 
      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
      <input type="file" name="uploadify" id="uploadify" />
    </p>
    <%--<div id="fileQueue" style="background-color:gainsboro;"></div>--%>
    <div id = "dvInfo">
        <table id = "tbInfo" class="tbColor" >
            <tr style="background-color:palevioletred"><td>文件名</td><td>文件类型</td><td>文件大小</td></tr>
        </table>
    </div>
</body>
</html>

后台代码(.ashx)：

using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;


namespace JQueryUploadDemo
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            //string temp = DateTime.Now.ToString("F");
            try
            {
                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);
                    //读取Session得到当前操作用户信息将文件信息路径等写入到数据库中
                    //FileName\ContentLength\FilePath\UploadFileUserName
                    //控件上传成功后上传队列(列表)自动消失
                    context.Response.Write("1");
                }
                else
                {
                    context.Response.Write("0");
                }
            }
            catch (Exception)
            {
                //不加try ... catch，当上传文件操作大小或其它异常时，会在浏览上报错
                //throw;
            }
        }
        
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Web.Config配置

    <!--修改上传文件大小限制          Begin-->
    <httpRuntime maxRequestLength="204800" executionTimeout ="7200"/>
    <!--为IIS7时，加入以下语句(非此处)
    <system.webServer>
      <validation validateIntegratedModeConfiguration="false" />
      <modules runAllManagedModulesForAllRequests="true" />
      <security>
        <requestFiltering>
          <requestLimits maxAllowedContentLength="2147483647"></requestLimits>
        </requestFiltering>
      </security>
    </system.webServer>-->
    <!--修改上传文件大小限制          End-->

效果图：

开始上传之前：