• Jquery Ajax文件上传插件Uploadify详解(下)



          在我的上一篇随笔里介绍了Jquery文件上传插件Uploadify的一些基本配置参数、事件和方法,都是一些死的东西,这篇随笔里就介绍一些服务器端的配置和Demo。

         用VS2010写Demo的时候,发现一个奇怪的现象,在FF、Chrome、IE6-8浏览器中文件上传一切正常,唯独在IE9中,Uploadify按钮点不动,无法打开选择文件对话框,郁闷啊,找原因:更新Flash Player、调整CSS样式,都不行……最后的解决办法竟然是在IIS中为demo单独配置一个站点,问题完美解决了!我也不知道Uploadify为什么在VS2010自带的调试服务器里面会出现这样的问题,而且只针对IE9……不管了,这不是重点,大家在测试uploadify时候注意一下这一点就可以了。

         下面就直接上例子吧……图片是源码文件结构和Html部分代码

     

      下面是服务器端代码:

    UploadifyHandler.ashx.cs
     1         public void ProcessRequest(HttpContext context)
     2         {
     3             context.Response.ContentType = "text/plain";
     4             context.Response.Expires = -1;
     5             //Get the post uploading file object. Uploadify default parameter is "Filedata"
     6             HttpPostedFile file = context.Request.Files["Filedata"];
     7             //Get the physical upload files path. You can put it in the web.config
     8             string uploadPath = HttpContext.Current.Server.MapPath("~/UserFiles/Files") + "\\";
     9             if (file != null)
    10             {
    11                 try
    12                 {
    13                     //Create the uploadfile directory if is not existed
    14                     if (!Directory.Exists(uploadPath)) Directory.CreateDirectory(uploadPath);
    15                     //save file. you can execute some sql opeation here
    16                     file.SaveAs(uploadPath + file.FileName);
    17                     context.Response.Write("Upload Successed!");
    18                 }
    19                 catch (Exception ex)
    20                 {
    21                     context.Response.Write(string.Format("Error:System error {0}", ex.Message.ToString()));
    22                 }
    23             }
    24             else
    25             {
    26                 context.Response.Write("Error:File object can't be null");
    27             }
    28         }

        这是一个最简单的例子,看一些资料说Uploadify对中文的支持不是很好,但是我自己测试了一下,3.2的版本好像没有这个问题。受之前版本的影响,一直想通过在后台返回某些值去触发onUploadError事件,结果不行,不论是返回0还是false或是其他值,前台这边Uploadify获得的状态都是Complate,触发的事件都是onUploadSuccess,找了几天的原因发现是自己的理解出了问题:只要前台将File传到服务器端,服务器端返回200响应,这个过程就被认为是Completed,除此之外的情况才会触发onUploadError事件,比如服务器端返回的状态码是500。所以想要人为的在前台显示自定义的错误信息还是要通过在onUploadSuccess函数中写脚本去判断返回值实现。Uploadify中OnUploadError事件是这么定义的:

    onUploadError
     1         // Triggered when a file upload returns an error
     2         onUploadError : function(file, errorCode, errorMsg) {
     3             // Load the swfupload settings
     4             var settings = this.settings;
     5 
     6             // Set the error string
     7             var errorString = 'Error';
     8             switch(errorCode) {
     9                 case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
    10                     errorString = 'HTTP Error (' + errorMsg + ')';
    11                     break;
    12                 case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
    13                     errorString = 'Missing Upload URL';
    14                     break;
    15                 case SWFUpload.UPLOAD_ERROR.IO_ERROR:
    16                     errorString = 'IO Error';
    17                     break;
    18                 case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
    19                     errorString = 'Security Error';
    20                     break;
    21                 case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
    22                     alert('The upload limit has been reached (' + errorMsg + ').');
    23                     errorString = 'Exceeds Upload Limit';
    24                     break;
    25                 case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
    26                     errorString = 'Failed';
    27                     break;
    28                 case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
    29                     break;
    30                 case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
    31                     errorString = 'Validation Error';
    32                     break;
    33                 case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
    34                     errorString = 'Cancelled';
    35                     this.queueData.queueSize   -= file.size;
    36                     this.queueData.queueLength -= 1;
    37                     if (file.status == SWFUpload.FILE_STATUS.IN_PROGRESS || $.inArray(file.id, this.queueData.uploadQueue) >= 0) {
    38                         this.queueData.uploadSize -= file.size;
    39                     }
    40                     // Trigger the onCancel event
    41                     if (settings.onCancel) settings.onCancel.call(this, file);
    42                     delete this.queueData.files[file.id];
    43                     break;
    44                 case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
    45                     errorString = 'Stopped';
    46                     break;
    47             }

     里面内置了这么10中错误,相应的ErrorCode如下:

    SWFUpload.UPLOAD_ERROR={HTTP_ERROR:-200,MISSING_UPLOAD_URL:-210,IO_ERROR:-220,SECURITY_ERROR:-230,UPLOAD_LIMIT_EXCEEDED:-240,UPLOAD_FAILED:-250,
    SPECIFIED_FILE_ID_NOT_FOUND:-260,FILE_VALIDATION_FAILED:-270,FILE_CANCELLED:-280,UPLOAD_STOPPED:-290};

     所以可以在onUploadError函数里面判断errorCode从而更改内置的错误信息显示。

        很多时候我们都需要限制用户上传文件的类型,一方面安全,另一方面也利于维护,所以在前台通过JS限制文件拓展名,后台验证文件MIME类型来实现,在这里的假设只能上传PDF、RAR、JPG格式的文件;除了限制文件类型,我们还需要限制文件的大小,不过ASP.NET默认的上传文件限制为4M,可以在Web.config里面system.web节点下新增httpRuntime配置即可,如下,我设置的是最大上载字节数为10M,请求超时为5分钟:

    <httpRuntime maxRequestLength="10240" executionTimeout="300"/>

     //TODO

  • 相关阅读:
    管道/重定向/环境变量
    用户和组命令
    常用命令
    系统监控及进程
    Centos硬件信息
    Centos系统信息及日志
    linux防火墙
    ipt_connlimit限制并发,ipt_recent限制单位时间内的请求数目
    apache添加mod_limitipconn限制单个ip并发连接数
    php核心技术与最佳实践知识点(下)
  • 原文地址:https://www.cnblogs.com/Hans2Rose/p/JqueryUploadify2.html
Copyright © 2020-2023  润新知