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

2019-11-20 09:45:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：Js+Ajax,Get和Post在使用上的区别小结

下一篇：JS与Ajax Get和Post在使用上的区别实例详解