提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JqueryUploadify上传带进度条的简单实例

实例上传 简单 进度条 JqueryUploadify
2023-06-13 09:15:17 时间

复制代码代码如下:


<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="UpLoad.aspx.cs"Inherits="UploadifyDemo_UpLoad"%>

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
   <title>JqueryUploadify上传带进度条</title>
   <linkhref="js/jquery.uploadify-v2.1.4/uploadify.css"rel="stylesheet"type="text/css"/>
   <scripttype="text/javascript"src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
   <scripttype="text/javascript"src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
   <scripttype="text/javascript"src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
   <scripttype="text/javascript">
       $(document).ready(function(){
           $("#uploadify").uploadify({
               "uploader":"js/jquery.uploadify-v2.1.4/uploadify.swf",//uploadify.swf文件的路径
               "script":"UploadHandler.ashx",//处理文件上传的后台脚本的路径
               "cancelImg":"js/jquery.uploadify-v2.1.4/cancel.png",
               "folder":"UploadFile/<%=subpathName%>",//上传文件夹的路径
               "queueID":"fileQueue",//页面中，你想要用来作为文件队列的元素的id
               "auto":false,//当文件被添加到队列时，自动上传
               "multi":true,//设置为true将允许多文件上传
               "fileExt":"*.jpg;*.gif;*.png",//允许上传的文件后缀
               "fileDesc":"WebImageFiles(.JPG,.GIF,.PNG)",//在浏览窗口底部的文件类型下拉菜单中显示的文本
               "sizeLimit":102400, //上传文件的大小限制，单位为字节100k
               "onCancel":function(event,ID,fileObj,data){//当从上传队列每移除一个文件时触发一次
                   alert("Theuploadof"+fileObj.name+"hasbeencanceled!");
               },
               "onComplete":function(event,ID,fileObj,response,data){//每完成一次文件上传时触发一次
                   alert("Thereare"+data.fileCount+"filesremaininginthequeue.");
               },
               "onAllComplete":function(event,data){//当上传队列中的所有文件都完成上传时触发
                   alert(data.filesUploaded+"filesuploadedsuccessfully!");
               }
           });
       });
   </script>
</head>
<body>
   <formid="form1"runat="server">
   <div>

   </div>
   </form>


   <divid="fileQueue"></div>
   <inputtype="file"name="uploadify"id="uploadify"/>
   <p>
       <ahref="javascript:$("#uploadify").uploadifyUpload()">上传</a>|
       <ahref="javascript:$("#uploadify").uploadifyClearQueue()">取消上传</a>
   </p>
</body>
</html>


复制代码代码如下:

<%@WebHandlerLanguage="C#"Class="UploadHandler"%>

usingSystem;
usingSystem.Web;
usingSystem.IO;

publicclassUploadHandler:IHttpHandler
{
   publicvoidProcessRequest(HttpContextcontext)
   {
       context.Response.ContentType="text/plain";
       context.Response.Charset="utf-8";

       HttpPostedFilefile=context.Request.Files["Filedata"];
       stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"]);

       if(file!=null)
       {
           if(!Directory.Exists(uploadPath))
           {
               Directory.CreateDirectory(uploadPath);
           }
           file.SaveAs(Path.Combine(uploadPath,file.FileName));
           context.Response.Write("1");
       }
       else
       {
           context.Response.Write("0");
       }
   }

   publicboolIsReusable
   {
       get
       {
           returnfalse;
       }
   }
}

相关文章