基于Jquery Uploadify插件的附件上传使用总结与分享

最近在研究大附件上传的问题，在网上找了很多这样的示例，但其中Uploaddify 个人认为是比较好用的一个。主要是有一个完整的Demo可以做参考，学习起来也方便。另外网上也有好心网友提供了不少的帮助说明，我这里也把它总结一下供大家参考，另外在使用中我也遇到了很多的问题，待会一一说明！

页面引用的文件

Javascript代码：

$(document).ready(function() {
            $("#uploadify").uploadify({
                'uploader': 'Upload/jquery.uploadify-v2.1.4/uploadify.swf',
                'script': 'Upload/UploadAPP.ashx',
                'buttonImg': 'Upload/jquery.uploadify-v2.1.4/selectfiles.gif',
                'cancelImg': 'Upload/jquery.uploadify-v2.1.4/cancel.png',
                'folder': 'UploadFiles/<% = subpathName %>',
                'queueID': 'fileQueue',
                'queueSizeLimit ': 2,
                'auto': false, //选中文件后，自动上传
                'multi': false, //允许上传多个文件
                //                'fileExt':'*.doc;*.docx',
                //                 'fileDesc':'请选择rar doc pdf文件',
                // 'sizeLimit': 102400000,  //Byte 单位  此为大约 100M
                'simUploadLimit': 2,
                'buttonText': '选择',
                'rollover': false,//鼠标放上图片闪动
                'width': 127,
                'height': 30,
                'wmode': 'transparent',
                'onComplete': function(event, queueId, fileObj, response, data) {
                    alert(response);
                },
                'onError': function(event, queueID, fileObj) {
                    alert(fileObj);
                }
            });
        });

HTMl 代码

<div style="font-size:small;border:solid 1px #c0c0c0; padding:0 10 10 10">请选择需要上传的文件:<br />
    <div id="fileQueue" ></div>
    <input type="file" name="uploadify" id="uploadify" />
    <input type="image" src="Upload/jquery.uploadify-v2.1.4/upload.gif" onclick="$('#uploadify').uploadifyUpload()" />
    </div>

当然前台这些处理完，还有后台请求的处理。我们采用IHttpHandler 来进行服务器接收文件的处理。通常我们上传都使用aspx的页面后台，但这样一旦文件大小大于配置的大小，其请求也不会到aspx的后台，这也是asp.net的生命周期中重的概念，呵呵，近期不玩这个还真不知道。书到用时方恨少啊！

所以建议学习.net 的应用关注一下这些底层的东西，而且 IHttpHandler 处理一些请求前的过滤处理非常有用，如：页面权限判断等，用了这个就不用每个页面去去进行权限判断了。具体这就不说了^^

后台，

  public class UploadAPP : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            //context.Response.Charset = "GB2312";
            //context.Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");

            context.Request.ContentEncoding = System.Text.Encoding.UTF8;
            //context.Request.ContentType =;

            HttpPostedFile file = context.Request.Files["Filedata"];
            string uploadPath = 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");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

这样就可以实现附件上传了，其中如果要设置大文件的上传，则需要配置一下 Web.config;

<httpRuntime maxRequestLength="10240" useFullyQualifiedRedirectUrl="true" executionTimeout="100"/>

这里看你的设置了。也要注意一下前台js 也有限制文件大小，这个是本附件在前台就进行了文件判断的。这样就保证了上传的文件都是可以无误的。

提供的Demo运行没有什么问题，而当我把这个移到我的项目中，问题就出来了。

1. 新建的.ashx 文件请求它无效，插件报"Http error"

我首先想到检查，JS中写的请求路径是否正确，确认后还是有问题，推测是web.config的问题，果然一查看，在我的web.config中已有包含

<system.webServer>

这个ajax的配置，其指定请求的后缀为.ashx的来请求AjaxPro 工厂这个类，我弄了很久还是找不到处理办法，包含对新建的.ashx文件的配置，加在这个前，加在这个后，都不行。没办法我把它去掉，结果还真行了。使用AjaxPro的页面也没出问题，我也不清楚问题在哪，希望高手们能给出答案。所以这个问题先就这样处理了。

2. 上传是能上传了，但中文命名的文件上传后文件名成了乱码

这个问题第一我就想到是编码的问题，而且也只可能是编码问题，在我的项目中，web.config因为原来的页面都配置了

而现在我又不能改成utf-8 这样会造成很多以前开发的页面有问题，网上说了一个对单独某页面的编码设置

但这只是单独将这个页面编码，而插件的Demo文件中，上传虽然有编码的处理，仔细一看是对Response对象的，咱这里肯定要编码Request

context.Request.ContentEncoding = System.Text.Encoding.UTF8;

DEMO源码公司这网速30KB ，下次我再上次，不好意思。

官网中也有应该，至少插件有。。

http://www.uploadify.com/

还有很多的东西在里面，大家有什么成果也可以分享下下。。

posted on 2011-05-30 16:05 Jing 華阅读(2355) 评论(1) 收藏举报

基于Jquery Uploadify插件的附件上传 使用总结与分享

基于Jquery Uploadify插件的附件上传使用总结与分享