网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery.Uploadify插件实现带进度条的批量上传功能
内容
    本文实例讲述了jQuery.Uploadify插件实现带进度条的批量上传功能。分享给大家供大家参考，具体如下：
    代码如下:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>Jquery Uploadify上传带进度条，且多参数</title>
      <link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
      <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function () {
          $("#pics").hide();
          $("#uploadify").uploadify({
            'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径
            'script': 'UploadHandler.ashx?type=add', //处理文件上传的后台脚本的路径
            'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
            'buttonText': 'Select Image',
            'folder': 'UploadFile/<% = DateTime.Now.ToString("yyyyMMdd") %>/', //上传文件夹的路径按20130416
            'queueID': 'fileQueue', //页面中，你想要用来作为文件队列的元素的id
            'auto': false, //当文件被添加到队列时，自动上传
            'multi': true, //设置为true将允许多文件上传
            'fileExt': '*.jpg;*.gif;*.png', //允许上传的文件后缀
            'queueSizeLimit': 5,
            'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在浏览窗口底部的文件类型下拉菜单中显示的文本
            'sizeLimit': 1024000, //上传文件的大小限制，单位为字节 1024*1000 1M
            'onComplete': function (event, queueID, fileObj, response, data) {
              var html = "";
              html += "  <li class=\'myli\'>";
              html += "  <img src=\"" + response + "\" class=\'myimg\'/>";
              html += "  <div style=\" position:absolute; right:8px; bottom:5px\">";
              html += "    <img title=\"点击删除\" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />";
              html += "  </div>";
              html += "  </li>";
              $("#pics").append(html);
            },
            'onAllComplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发
              //alert(data.filesUploaded + ' 个文件上传成功!');
              $("#pics").fadeIn();
            }
          });
        });
        function uploadpara() {
          //自定义传递参数
          $('#uploadify').uploadifySettings('scriptData', { 'name': $('#txtName').val(), 'albums': $('#txtAlbums').val() });
          $('#uploadify').uploadifyUpload();
        }
        function delImage(picurl) {
          jsonAjax("UploadHandler.ashx", "type=del&picurl=" + picurl, "text", callBackTxt);
        }
        function jsonAjax(url, param, datat, callback) {
          $.ajax({
            type: "post",
            url: url,
            data: param,
            dataType: datat,
            success: callback,
            error: function () {
              jQuery.fn.mBox({
                message: '恢复失败'
              });
            }
          });
        }
        function callBackTxt(data) {
          var o = data;
          if (o != "") {
            var e = $(".myli img[src='" + data + "']");
            e.each(function () {
              $(this).parent().remove();
            })
          } else {
            alert("删除失败");
          }
        };
      </script>
      <style type="text/css">
      .myul
      {
       margin:5px 5px 5px 5px;
       padding:0px;
      }
      .myli
      {
        list-style-type:none;
        width:150px;
        height:150px;
        display:inline;
        position:relative;
      }
      .myimg
      {
        width:120px;
        height:120px;
      }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div>
      <div id="fileQueue"></div>
      <input type="file" name="uploadify" id="uploadify" />
      <div id="pics">
      <ul>
      </ul>
      </div>
      <div>
      <p>
        <a href="javascript:void(0);" onclick="uploadpara();">上传</a>|
        <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
      </p>
      </div>
      </div>
      </form>
    </body>
    </html>
    代码如下:
    <%@ WebHandler Language="C#" Class="UploadHandler" %>
    using System;
    using System.Web;
    using System.IO;
    /// <summary>
    /// UploadHandler文件上传
    /// </summary>
    public class UploadHandler : IHttpHandler
    {
      public void ProcessRequest(HttpContext context)
      {
        context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";
        string type = context.Request["type"];
        if (type=="add")
        {
          HttpPostedFile file = context.Request.Files["Filedata"];
          string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);
          string name = context.Request.Params["name"]; //获取传递的参数
          string albums = context.Request.Params["albums"];
          if (file != null)
          {
            if (!Directory.Exists(uploadPath))
            {
              Directory.CreateDirectory(uploadPath);
            }
            file.SaveAs(Path.Combine(uploadPath, file.FileName));
            context.Response.Write(@context.Request["folder"] + file.FileName);
          }
          else
          {
            context.Response.Write("");
          }
        }
        else if (type == "del")
        {
          string picurl = context.Request["picurl"];
          try
          {
            File.Delete(context.Server.MapPath(picurl));
            context.Response.Write(picurl);
          }
          catch
          {
            context.Response.Write("");
          }
        }
        else
        { }
      }
      public bool IsReusable
      {
        get
        {
          return false;
        }
      }
    }
    希望本文所述对大家jQuery程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 11:07:55