Asp.net无刷新上传图片及其范例截图-技术开发专区

Asp.net无刷新上传图片及其范例截图

作者：porschev 编辑：苏巧红 2011-11-30 12:04 来源：博客园

修复文件开头提到Uploadify用Session在Chrome和FireFox下的Bug(身份验证也一样有这个BUG，修复同理)

　　如果UploadAvatarHandler.ashx中要用到Session那就需求些额外的配置

　　在Global.asax中Application_BeginRequest加入下列代码

protected void Application_BeginRequest(object sender, EventArgs e)
{
//为了Uploadify在谷歌和火狐下不能上传的BUG
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
        {
        }
}

　　页面中加入隐藏域

　　并在页面的Load事件中，把SessionID赋给隐藏域

　　Uploadify()方法scriptData属性在做修改

$('#uploadify').uploadify({
      //....
      'scriptData': { 'ASPSESSID': $('[id$=hdSessionId]').val() },
      //.....
});

　　以上操作，用于修改身份验证也一样。。。

　　一些扩展

　　CutPic.js中有一些可以扩展

　　比如：有人要求截图区域自己要可以拖动

把CutPic.js图片显示，截图区HTML变成这样

　　再给这些新添DIV写些样式。。。^_^! 这里自己扩展吧

　　显示区的JS加上最后一个参数

function ShowImg(imagePath,imgWidth,imgHeight) {
      var imgPath = imagePath != "" ? imagePath : "!images/ef_pic.jpg";
      var ic = new ImgCropper("bgDiv", "dragDiv", imgPath, imgWidth, imgHeight, { Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown", RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp"});
}

　　可能还有需求上传不要进度条，这个我没找到属性，有用过的可以指点一下，

　　不过这个问题没有属性也不是不可以解决的，可以在uploadify的JS文件中删除或注释掉append的这一段进度条HTML代码。

　　这样就做完了，Uploadify和这个CutPic.js几乎能做到所有现在能看到的上传截图功能，还有的自己扩展一下^-^!

　　PS：示例代码没有优化，请各位自己做做优化^_^!

　　Demo下载：VS08: http://files.cnblogs.com/zhongweiv/CutAvatarVS08.rar

　　VS10: http://files.cnblogs.com/zhongweiv/CutAvatarVS10.rar

　　(大家在看这个Demo时好像遇到不少问题，我帮大家转好了08和10的，各位可以下载，IIS的配置还是那样)

　　Demo友情提示：布署在IIS上，再看，因为示例路径全是从根目录开始

　　对于各位看管的疑问解答：

　　Demo相关(因为个人习惯，写东西喜欢布暑在IIS中，路径从根目录开始，所以直接看，带来了些不便^_^!)

　　如果没有显示出FLash上传的，那一定是路径有问题

　　对于Demo再加些操作提示，可能很多人没有用过自定义端服务器：

　　布暑在IIS里，设置好端口号，如果是4.0环境，应用程序连接池选择framework4.0

　　在VS中设置，选中网站项目，右键---->属性页---->启动选项---->选择自定义服务器---->基URL填入你在IIS里设置的，比如：http://localhost:XXXX/ (XXXX代表你在IIS里设置的端口号)

　　确实，运行页面

　　如果用VS10转化，在IIS里布暑点击保存出来error

　　那有两种可能

　　连接池framework的版本你还是没选对

　　ISAPI和GCI限制里asp.net4.0没有设置为允许。。。

　　如果这个Demo会出错。。那你转成4.0之后编译应该就会报targetFramework的错。。。。如果实在没有什么IIS的设置经验，建议自己搜索一下或者看看IIS方面的文章

　　onComplete事件方法中几个参数的解释：

　　event:名字就很明显了

　　queueId 就是个唯一标识

　　fileObj 这是指那个文件

　　比如:fileObj.name 就是文件名

　　fileObj.size 是文件大小

　　上传文件的相关信息都可以用这个获得，还有创建时间，文件类型等

　　response：这是你返回的信息

　　data：有四个属性

　　filesUploaded :上传了多少个文件

　　errors ：出现了多少个错误

　　allBytesLoaded ：总共上传文件的大小(因为它可以多文件上传)

　　speed ：这是上传速度

第1页：上传示例及前期准备工作、代码编辑第2页：用session时的bug及相关扩展和总结

关注我们