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 相关文章推荐
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
JS继承实现方法及优缺点详解
Sep 02 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文本操作类
2006/11/25 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
二级域名转向类
2006/11/09 Javascript
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
numpy基础教程之np.linalg
2019/02/12 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
资料员的岗位职责
2013/11/20 职场文书
技校毕业生自荐信
2014/06/03 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android