文件上传Uploadfy控件使用详解，及其使用过程中遇到的问题

     首先，先对 Uploadfy做一个简单的介绍，Uploadfy是一个JQuery插件，可以使我们轻松的完成文件的上传功能。Uploadfy提供的功能有：支持多文件上传、HTML5版本的支持文件拖拽到文件上传队列、实时的显示文件上传的进度、自定义上传限制（设置上传文件的的大小限制、类型限制、文件数限制、同时上传的文件数限制，以确保服务器在正常压力下运行）。官网的地址是：http://www.uploadify.com。官网目前提供了HTML5和Flash两个版本。Flash版本是完全免费且开源的，但在使用过程中会存在一定的问题，这个也是本文的意义之处；HTML5是收费的，费用是5美元，没有使用过，因此不清楚他的性能如何，不过收费的和免费的相比，相信HTML5版的肯定好些。好的闲话不多说，言归正传。

     一、Uploadfy的基本使用

      首先，要使用Uploadfy，就要引入Uploadfy所必须的文件：jquery.uploadify.js和uploadify.swf，当然，由于Uploadfy是基于JQuery的，因此JQuery库也是必须的，比如：jquery-1.8.2.min.js、jquery-ui-1.8.24.min.js。

 <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" > </script>
 <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" > </script>
 <script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.js")" > </script>

      其次，使用Uploadfy上传文件，直接上代码.

$(document).ready(function(){
     $("#target").uploadify({
        'swf': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',//
        'uploader': '@Url.Action("Upload", "Document")',
        'queueID': 'fileQueue',
     }); 

     再次，对Uploadfy 参数（Options）设置、Events、Methods进行说明。

   （1）Options   

     auto，用来设置是否自动上传（当我们从对话框选择完文件时，如果auto为false，不会自动上传，如果auto为true，文件自动上传），默认值为true；

     fileSizeLimit：上传文件的大小限制，默认的单位是KB；

     fileTypeDesc：文件类型的说明，比如：图片；和fileTypeExts一起使用；

     fileTypeExts：指定允许上传的文件类型，比如：‘*.jpg;*.png;*.gif’；

     formData：指定上传文件附带的其他数据，它的数据类型是JSON，在初始化时，使用到它，一般用来上传一些静态的数据。当需要传一些动态的数据时，可以使用下面的方法：

var jsonDatas = { 'sessid': sessid, 'auth': auth };
$('#target').uploadify('settings', 'formData', jsonDatas); 

     preventCaching：阻止浏览器使用缓存，默认值为true；

     progressData：设置文件上传时显示的数据，“speed”和“percentage”；

     queueID:  表示上传队列的DOM元素ID，用来展示文件队列的容器；

     queueSizeLimit:  上传队列的大小限制；

     removeTimeOut：表示上传完成后多长时间从队列中删除进度条；默认3秒；

     swf：swf文件的路径；

     uploader：服务器对处理文件上传的方法路径；

     uploadLimit：最多上传文件的数量；

   （2）Events

      onCancel：在文件被从上传队列中移除时触发；

      onClearCancel：在调用cancel且传入的参数是‘*’触发；

          onDialogClose：关闭选择文件对话框时触发；

      onDialogOpen：打开选择文件对话框时触发；

      onFallback：当浏览器不兼容Uploadfy的Flash时触发；

      onQueueComplete：当对列中的文件上传完后触发；

      onUploadComplete：每上传完一个文件触发；

      onUploadError：上传文件失败时触发；

      onUploadSuccess：上传文件成功时触发；

     （3）Methods

$('#target').uploadify('cancel','*')"
$('#target').uploadify('upload'，'*')"

     一、Uploadfy的使用过程中出现的问题

            在插件的使用过程中难免会出现一些问题，如浏览器兼容问题，Uploadfy也不例外。在此，我将项目使用时遇到的问题以及解决方案在此分享。当前使用的版本号是V3.2.1

        Problem1：在使用时上传队列中的移除按钮缺失，但是鼠标移到上传队列的每一个Item时，鼠标变成hands，可以相应关闭事件，这个好像是Uploafy的一个bug。

        Solution1：这个问题是由于uploadfy.css文件中的.uploadify-queue-item .cancel a 样式的背景图片的路径有问题，因此，只需要打开uploadfy.css文件，修改.uploadify-queue-item .cancel a样式的背景图片路径：

background: url('../img/uploadify-cancel.png') 0 0 no-repeat;修改成background: url('uploadify-cancel.png') 0 0 no-repeat;

        Problem2：谷歌浏览器对Uploadfy插件不兼容。

        Solution2：这个问题是由于谷歌浏览内置了一个Flash插件，和Uploadfy的Flash发生了冲突，因此只需要禁用谷歌浏览器的内置Flash插件即可。在谷歌浏览器的地址栏中输入chrome://plugins/回车，找到Adobe Flash Player项，禁用Google浏览器的Flash插件。

        Problem3：在使用谷歌、火狐浏览上传文件时，session的值丢失。

        Solution3：因为Uploadfy插件使用Flash进行文件上传，在IE浏览器器下，Flash会把当前页面的Cookie发送到后台，而火狐、谷歌浏览器不会，因为Session是靠Cookie中保存的SessionID实现的，解决这个问题的思路是手动的把SessionID添加到服务器。具体解决方法如下：

       在Global.asax.cs文件中添加以下代码：

       void Application_BeginRequest(object sender, EventArgs e)
        {
            try
            {
                string session_param_name = "ASPSESSID";
                string session_cookie_name = "ASP.NET_SessionId";
                if (HttpContext.Current.Request.Form[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
                }
                else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
                }
            }
            catch
            {
            }


            //此处是身份验证
            try
            {
                string auth_param_name = "AUTHID";
                string auth_cookie_name = FormsAuthentication.FormsCookieName;
                if (HttpContext.Current.Request.Form[auth_param_name] != null)
                {
                    UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
                }
                else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
                {
                    UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
                }
            }
            catch { }
        }

        private void UpdateCookie(string cookie_name, string cookie_value)
        {
            HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
            if (null == cookie)
            {
                cookie = new HttpCookie(cookie_name);
            }
            cookie.Value = cookie_value;
            HttpContext.Current.Request.Cookies.Set(cookie);//重新设定请求中的cookie值，将服务器端的session值赋值给它
        }

        var auth = "@(Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value)";
        var sessid = "@(Session.SessionID )";

var jsonDatas = { 'sessid': sessid, 'auth': auth}
$('#target').uploadify('settings', 'formData', jsonDatas);

最后

以上就是复杂中心为你收集整理的文件上传Uploadfy控件使用详解，及其使用过程中遇到的问题的全部内容，希望文章能够帮你解决文件上传Uploadfy控件使用详解，及其使用过程中遇到的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。