Uploadify插件做出带进度条批量上传功能

来源：动视网责编：小采时间：2020-11-27 19:51:50

Uploadify插件做出带进度条批量上传功能

Uploadify插件做出带进度条批量上传功能:这次给大家带来Uploadify插件做出带进度条批量上传功能，Uploadify插件做出带进度条批量上传功能的注意事项有哪些，下面就是实战案例，一起来看一下。<%@ Page Language="C#" AutoEventWireup="true" C

推荐度：

点击下载本文 文档为doc格式

导读Uploadify插件做出带进度条批量上传功能:这次给大家带来Uploadify插件做出带进度条批量上传功能，Uploadify插件做出带进度条批量上传功能的注意事项有哪些，下面就是实战案例，一起来看一下。<%@ Page Language="C#" AutoEventWireup="true" C

这次给大家带来Uploadify插件做出带进度条批量上传功能，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 += " <p style=\" position:absolute; right:8px; bottom:5px\">";
 html += " <img title=\"点击删除\" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />";
 html += " </p>";
 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">
 <p>
 <p id="fileQueue"></p>
 <input type="file" name="uploadify" id="uploadify" />
 <p id="pics">
 <ul class="myul">
 </ul>
 </p>
 <p>
 <p>
 <a href="javascript:void(0);" onclick="uploadpara();">上传</a>|
 <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
 </p>
 </p>
 </p>
 </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;
 }
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Uploadify插件做出带进度条批量上传功能

推荐度：

点击下载本文 文档为doc格式

标签：上传批量功能

热门焦点

Uploadify插件做出带进度条批量上传功能

Uploadify插件做出带进度条批量上传功能

Uploadify插件做出带进度条批量上传功能

最新推荐

猜你喜欢

热门推荐