Uploadify 应用

来自：http://student.csdn.net/space.php?uid=216968&do=blog&id=55236

 

昨天猫意外地发现数据库中存在放图片路径的字段 想想将计就计吧 正好没折腾过文件上传

跑去问了可爱的搞web的朋友 答曰自己用js写 瞬间呆住 立即反映过来 自己被.net惯坏了

于是跑去看了<input type="file" />标签 发现在格式控制上很不方便 用自己写js  当选择的格式不是自己规定的 再弹alter提醒 不喜(这里欢迎拍砖!)

通过js限定格式资料:http://huagenli.javaeye.com/blog/498063

想想 还是找插件吧 把目标放在了JQuery上 于是发现了一个用JQuery写的插件---uploadify

官网:http://www.uploadify.com/

下载完了后

把要需要的东西导入就行了:(这里我用到了cancel.png, jquery-1.4.2.min.js, jquery.uploadify.v2.1.4.min.js, uploadify.css, swfobject, uploadify.swf 都在下载的压缩包中 找出来放到项目中就行了)

<script src="/Content/Scripts/jquery-1.4.1.min.js"  type="text/javascript" ></script>  

<script src="/Content/Scripts/swfobject.js"  type="text/javascript" ></script>  

<script src="/Content/Scripts/jquery.uploadify.v2.1.0.min.js"  type="text/javascript" ></script> 

<link href="/Content/Styles/uploadify.css"  rel="stylesheet"  type="text/css"  /> 

 

我们先在html中加入一个<input id="fileInput" name="fileInput" type="file" />
 然后添加 <a href="javascript:$('#fileInput').uploadifyUpload();">上传</a>

然后来看看参数设置

这是我的设置: 由于我用的是asp.net mvc3 所以script就改成了相应的Action路径 能发现我这个是Login控制器下的Register Action

 

 <script type="text/javascript" >  

$(function() {   

    //上传   

    $('#fileInput' ).uploadify({   

        'uploader' : '../../Content/Flash/uploadify.swf' ,   

        'script' : '/Login/Register' ,   

        'folder' : '/UploadFiles' ,   

        'cancelImg' : '/Content/Images/cancel.png' ,   

        'fileExt' : '*.jpg;*.gif;*.bmp;*.png' ,   

        'fileDesc' : '*.jpg;*.gif;*.bmp;*.png' ,   

        'sizeLimit' : 1024 * 1024 * 4, //4M   

        'multi' : false ,   

        'onComplete' : fun,   

        'wmode' :'transparent'   

    });    

});  

function fun(event , queueID, fileObj, response, data) {   

    if  (response != "" ) {   

        showInfo("成功上传" +response, true ); //showInfo方法设置上传结果        

    }   

    else  {   

        showInfo("文件上传出错！" , false );   

    }  

}      

</script>

 

控制器:

 

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
    using EntityModel;  
    using System.Data.Entity;  
    using SuperMarketSystem.LoginServiceReference;  
    
   namespace SuperMarketSystem.Controllers  
  {  
       public class LoginController : Controller  
       {  
           //  
           // GET: /Login/  
    
           public ActionResult Login()  
           {  
               return View();  
           }  
    
           [HttpPost]  
           public ActionResult Login(FormCollection formCollection)  
           {  
               string userName = formCollection["txtUserid"];  
               string userPwd = formCollection["txtPwd"];  
    
               //调用服务  
               LoginServiceReference.LoginClient login = new LoginClient();  
               User loginuser = login.ToLogin(userName, userPwd);  
    
               if (loginuser != null)  
               {  
                   return RedirectToAction("Index", "Home", new { id = loginuser.UserID });  
               }  
               else 
               {  
                   Response.Write("<script>alert('用户名或密码错误!')</script>");  
                   return View();  
               }  
    
           }  
    
           public ActionResult Register()  
           {  
               return View();  
           }  
    
           [HttpPost]  
           public ActionResult Register(HttpPostedFileBase FileData, string folder,FormCollection formCollection)  
           {  
               return View();  
         }  
     }  
 }  

 

uploader   ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 
script   ：   后台处理程序的相对路径 。默认值：uploadify.php 
checkScript   ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
fileDataName   ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 
method   ： 提交方式Post 或Get 默认为Post 
scriptAccess ： flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain  
folder ：   上传文件存放的目录 。 
queueID ：   文件队列的ID，该ID与存放文件队列的div的ID一致。 
queueSizeLimit ：   当允许多文件生成时，设置选择文件的个数，默认值：999 。 
multi ：   设置为true时可以上传多个文件。 
auto ：   设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。 
fileDesc ：   这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本

fileExt ：   设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。 
sizeLimit ：   上传文件的大小限制 。 
simUploadLimit ：   允许同时上传的个数 默认值：1 。 
buttonText ：   浏览按钮的文本，默认值：BROWSE 。 
buttonImg ：   浏览按钮的图片的路径 。 
hideButton ：   设置为true则隐藏浏览按钮的图片 。 
rollover ：   值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。 
width ：   设置浏览按钮的宽度 ，默认值：110。 
height ：   设置浏览按钮的高度 ，默认值：30。 
wmode ：   设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。 
cancelImg   ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，如下图：

onInit :   做一些初始化的工作。

onSelect ： 选择文件时触发，该函数有三个参数

• event:事件对象。
• queueID：文件的唯一标识，由6为随机字符组成。
• fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
•  

 

onSelectOnce   ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：

• fileCount：选择文件的总数。
• filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
• filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
• allBytesTotal：所有选择的文件的总大小。

 

onCancel :   当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect   中的三个参数，data对象有两个属性fileCount和allBytesTotal。

• fileCount：取消一个文件后，文件队列中剩余文件的个数。
• allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

 

onClearQueue   ： 当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel  中的两个对应参数。

onQueueFull ： 当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError ： 当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。

• type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
• info：错误的描述

 

onOpen ： 点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。

onProgress   ： 点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、 queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、 allBytesLoaded、speed：

• percentage：当前完成的百分比
• bytesLoaded：当前上传的大小
• allBytesLoaded：文件队列中已经上传完的大小
• speed：上传速率 kb/s

 

onComplete ：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed

• fileCount：剩余没有上传完成的文件的个数。
• speed：文件上传的平均速率 kb/s

参考资料:

在asp.net webform上的应用:http://www.cnblogs.com/Lewis/archive/2010/04/27/1722024.html

在asp.net mvc上的应用:http://www.cnblogs.com/dingji/archive/2010/07/07/1772909.html

 

接下来我们来看看效果 这里我犯了一个低级错误,我用的firefox进行调试的 发现uploadify.swf没有显现出来 所以我没法进行选择文件 直接点上传文件 会出错 试了几次后我换了ie进行调试 才发现是firefox没有把.swf加载进来 于是安装flash插件 显示成功(汗喔..)

我试了下上传 发现出现了iO Error的提示

这个问题要在web.config 中配置，代码：

 

 <system.web>  
          <httpRuntime maxRequestLength= "102400 " executionTimeout= "60" />  
   </system.web> 

 

需要上传更大的文件，只要设置maxRequestLength属性即可

现在试了下 上传成功~

然后俺觉得选择文件的图标不好看 能不能换成自己的呢

我们把uploader属性改成自己想要用的图片

 

$(function() {   

    //上传   

  $('#fileInput' ).uploadify({   

        'uploader' : '../../Content/Images/qzw.jpg' ,   

        'script' : '/Login/Register' ,   

        'folder' : '/UploadFiles' ,   

        'cancelImg' : '/Content/Images/cancel.png' ,   

        'fileExt' : '*.jpg;*.gif;*.bmp;*.png' ,   

        'fileDesc' : '*.jpg;*.gif;*.bmp;*.png' ,   

        'sizeLimit' : 1024 * 1024 * 4, //4M   

        'multi' : false ,   

        'onComplete' : fun   

    });   

  }); 

 

然后运行 啊咧 发现图片两旁好多空白啊 于是我们在后面加上 'wmode':'transparent'

ok 再运行一下 空白消失

参考资料:

JQupery上传插件Uploadify详解及其中文按钮解决方案:http://hi.baidu.com/user_pyw/blog/item/bd24f74221d8f01d9313c631.html

至于后台怎么处理 在这里有说明:

http://www.cnblogs.com/dingji/archive/2010/07/07/1772909.html