jQuery.Uploadify插件实现带进度条的批量上传功能


Posted in Javascript onJune 08, 2016

本文实例讲述了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 class="myul">
  </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程序设计有所帮助。

Javascript 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 #Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 #Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 #Javascript
JavaScript中两个字符串的匹配
Jun 08 #Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 #Javascript
You might like
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python之re操作方法(详解)
2017/06/14 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
python和go语言的区别是什么
2020/07/20 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
最新英语专业学生求职信范文
2013/09/21 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
企业消防安全制度
2014/02/02 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
学校三节实施方案
2014/06/09 职场文书
上海世博会口号
2014/06/19 职场文书
党章培训心得体会
2014/09/04 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
心术观后感
2015/06/11 职场文书
《开国大典》教学反思
2016/02/16 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript