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 相关文章推荐
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue实现分页栏效果
Jun 28 Javascript
微信小程序网络请求实现过程解析
Nov 06 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安全性问题中的:Null 字符问题
2013/06/21 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
Linux的主要特性
2014/10/06 面试题
运动会邀请函范文
2014/01/31 职场文书
教师校本培训方案
2014/02/26 职场文书
学生自我评语大全
2014/04/18 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
国庆节标语大全
2014/10/08 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
结婚典礼致辞
2015/07/28 职场文书
python实现监听键盘
2021/04/26 Python