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 相关文章推荐
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
vue中是怎样监听数组变化的
Oct 24 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
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
javascript this用法小结
2008/12/19 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python如何使用腾讯云发送短信
2020/09/17 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
css3学习心得分享
2013/08/19 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
大课间活动制度
2014/01/18 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
代办社保委托书范文
2014/10/06 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL