Jquery上传插件JqUploader

最新推荐文章于 2022-12-03 02:00:00 发布

dianbiaosao3462

最新推荐文章于 2022-12-03 02:00:00 发布

阅读量265

点赞数

文章标签： xhtml 测试 javascript ViewUI

原文链接：http://www.cnblogs.com/hipo/archive/2012/03/03/2378133.html

版权

1、JqUploader介绍

JqUploader是一个Jquery的插件，采用基于Flash的方式为Html的上传文件input file添加了有百分比显示的进度条，来提高整个页面的用户体验。当然它的使用也是相当简便，只要在页面中引入jquery.flash.js，jquery.jqUploader.js及jquery的js文件就能使用，同时也继承了JQuery的兼容各种浏览器的优点。

官方提供下载：http://www.pixeline.be/experiments/jqUploader/

使用参考文档：http://www.pixeline.be/experiments/jqUploader/doc.php

2、JqUploader的使用实例

实例环境：ASP.Net MVC 2.0

首先是我们建立Index.aspx视图，就我们实验的上传界面。
   1: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
   2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3:  
   4: <html xmlns="http://www.w3.org/1999/xhtml" >
   5: <head runat="server">
   6:     <title>Index</title>
   7:     <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   1:  
   2:     <script src="../../Scripts/jquery.flash.js" type="text/javascript">
   1: </script>
   2:     <script src="../../Scripts/jquery.jqUploader.js" type="text/javascript">
   1: </script>
   2:     <script type="text/javascript">
   3:         $(document).ready(function () {
   4:  
   5:             $("#file1").jqUploader({
   6:                 background: "FFFFFF",
   7:                 barColor: "555555",
   8:                 allowedExt: "*",
   9:                 hideSubmit: true,
  10:                 allowedExtDescr:"Images (*.jpg; *.jpeg; *.png)"
  11:             });
  12:         })
  13:     
</ script >
   8: </head>
   9: <body>
  10:     <div>
  11:     <h2>JQuery Plugins JqUploader Test</h2>
  12:     <%
   1:  Html.BeginForm("upfile", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }); 
%>
  13:          <input id="file1" type="file" name="file1" />   
  14:     <%
   1:  Html.EndForm(); 
%>
  15:     </div>
  16: </body>
  17: </html>
在引入所需js文件后，我们就可利用jqUploader()方法简单的定制界面显示，其中为了提供了22个属性供我们设置自定义，已达到想要的效果。这些属性详细介绍如下：
maxFileSize ：被用来限制上传文件的大小，默认情况下是不做限制。注意：由于此插件基于Flash实现，Flash Player限制最大100M； width: Flash文件上传界面的宽度，默认为‘320’； height: Flash文件上传界面的高度，默认为‘85’； version: 支持的最低的Flash版本，默认为Flash 8.所以建议不要设置在8以下版本； background: 这个界面的背景色，默认为白色(‘FFFFFF’); hideSubmit: 此属性使用来告诉浏览器是否显示表单的提交按钮，默认为true； cls: 用这个属性来给上传控件添加class，默认为jqUploader； src: Flash文件的路径，默认为jqUploader.swf，即网站根目录下； uploadScript: 服务器端用于处理上传的脚本文件路径，默认情况下，就是Form的Action的值； afterScript：上传完成之后，页面重定向到此页，也是个可选项； varName：用于生成文本框的Name属性，一般不用这个； allowedExt：限制上传文件的格式，默认为“*.jpg; *.jpeg; *.png”； allowedExtDescr：这个描述将显示在你的浏览的文件格式限制下拉框中，默认为"Images (*.jpg; *.jpeg; *.png)" ； flashvars：可以给Flash文件传递一些变量，默认为空，格式为{foo:”bar”}； elementType：Flash的容器，默认为一个div； barcolor：进度条的背景色，默认为‘0000CC’； startMessage：欢迎信息； errorSizeMessage：这个信息用来显示选择的文件大小超出限制的提示信息； validFileMessage：这个信息用于文件的验证和邀请用户上传的信息； progressMessage：文件上传中的提示信息，默认Please wait, uploading； endMessage: 上传完成后的提示信息。

3、Demo源代码下载

转载于:https://www.cnblogs.com/hipo/archive/2012/03/03/2378133.html

dianbiaosao3462

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery上传插件JqUploader

1、JqUploader介绍 JqUploader是一个Jquery的插件，采用基于Flash的方式为Html的上传文件input file添加了有百分比显示的进度条，来提高整个页面的用户体验。当然它的使用也是相当简便，只要在页面中引入jquery.flash.js，jquery.jqUploader.js及jquery的js文件就能使用，同时也继承了JQuery的兼容各种...
复制链接

扫一扫