夏日博客

A-A+

jquery uploadify插件实现上传文件进度条效果

2016年01月09日 前端设计 暂无评论 阅读 22 views 次

jquery uploadify插件是一个文件上传插件了，它可以配置脚本来实现文件上传了，下面小编来看看jquery uploadify插件实现上传文件进度条效果例子吧，希望文章对各位带来帮助。

一、jquery进度条代码:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. <link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />  
  5. <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>  
  6. <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>  
  7. <script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>  
  8. <script type="text/javascript">  
  9. $(document).ready(function () {  
  10. $("#uploadify").uploadify({  
  11. 'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径  
  12. 'script': 'UploadHandler.ashx', //处理文件上传的后台脚本的路径  
  13. 'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',  
  14. 'folder': 'UploadFile/<% = subpathName %>', //上传文件夹的路径  
  15. 'queueID': 'fileQueue', //页面中，你想要用来作为文件队列的元素的id  
  16. 'auto': false, //当文件被添加到队列时，自动上传  
  17. 'multi': true, //设置为true将允许多文件上传  
  18. 'fileExt': '*.jpg;*.gif;*.png', //允许上传的文件后缀  
  19. 'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在浏览窗口底部的文件类型下拉菜单中显示的文本  
  20. 'sizeLimit': 102400,  //上传文件的大小限制，单位为字节 100k  
  21. 'onCancel': function (event, ID, fileObj, data) { //当从上传队列每移除一个文件时触发一次  
  22. alert('The upload of ' + fileObj.name + ' has been canceled!');  
  23. },  
  24. 'onComplete': function (event, ID, fileObj, response, data) { //每完成一次文件上传时触发一次  
  25. alert('There are ' + data.fileCount + ' files remaining in the queue.');  
  26. },  
  27. 'onAllComplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发  
  28. alert(data.filesUploaded + ' files uploaded successfully!');  
  29. }  
  30. });  
  31. });  
  32. </script>  
  33. </head>  
  34. <body>  
  35. <form id="form1" runat="server">  
  36. <div>  
  37. </div>  
  38. </form>  
  39. <div id="fileQueue"></div>  
  40. <input type="file" name="uploadify" id="uploadify" />  
  41. <p>  
  42. <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|   
  43. <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>  
  44. </p>  
  45. </body>  
  46. </html>  

二、后端程序代码，产生jquery进度条的数据源:

  1. <%@ WebHandler Language="C#" Class="UploadHandler" %>  
  2. using System;  
  3. using System.Web;  
  4. using System.IO;  
  5. public class UploadHandler : IHttpHandler  
  6. {  
  7. public void ProcessRequest(HttpContext context)  
  8. {  
  9. context.Response.ContentType = "text/plain";  
  10. context.Response.Charset = "utf-8";  
  11. HttpPostedFile file = context.Request.Files["Filedata"];  
  12. string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);  
  13. if (file != null)  
  14. {  
  15. if (!Directory.Exists(uploadPath))  
  16. {  
  17. Directory.CreateDirectory(uploadPath);  
  18. }  
  19. file.SaveAs(Path.Combine(uploadPath, file.FileName));  
  20. context.Response.Write("1");  
  21. }  
  22. else  
  23. {  
  24. context.Response.Write("0");  
  25. }  
  26. }  
  27. public bool IsReusable  
  28. {  
  29. get  
  30. {  
  31. return false;  
  32. }  
  33. }  
  34. }  
标签：

给我留言