Jquery上传图片，xml方式显示图片【1】

　一，　这里采用了网络上的上传组件， 

<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet"
        type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

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

    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
                'script': 'UploadHandler.ashx',
                'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
                'folder': 'UploadFile$<%=paramsArray %>',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true
            });
        }); 
    </script>

 

<table class="blue">
        <tr>
            <td colspan="3">
                <div id="fileQueue" style="border: none;">
                </div>
            </td>
        </tr>
        <tr>
            <td class="td_r">
                <input type="file" class="btn0" style="background-image: none;" name="uploadify"
                    id="uploadify" />
            </td>
            <td class="td_l">
                <input id="Button1" type="button" class="x-btn" onclick="javascript:$('#uploadify').uploadifyUpload()"
                    value="上   传" />
            </td>
            <td class="td_r">
                <input id="Button2" class="x-btn" type="button" onclick="javascript:$('#uploadify').uploadifyClearQueue()"
                    value="取消上传" />
            </td>
        </tr>
    </table>

因为是页面跳转，所以我url传参，本系统采用Coolite Ext框架：

 在主页面

   paramsArray = "BussinessTypeId:" + this.M_BankrollApplyReg.Id + "$BussinessId:" + this.M_BankrollApplyReg.Id + "$TableName:BankrollApplyReg";
            ShowImgUrl = "DepositManage/ReceiveShowPage.aspx?BussinessTypeId=" + this.M_BankrollApplyReg.Id + "&BussinessId=" + this.M_BankrollApplyReg.Id + "&TableName=BankrollApplyReg";
            ShowHanlder = " parent.ShowUrl('" + ShowImgUrl + "','查看图片',750,620,false); ";
            btn_ShowFile.Listeners.Click.Handler = ShowHanlder;
            btn_UploadFile.Listeners.Click.Handler = " parent.ShowUrl('UploadFile.aspx?paramsArray=" + paramsArray + "','上传图片',450,450,false); ";
            this.btn_UploadFile.Visible = true;
            this.btn_ShowFile.Visible = true;

 

调用了父窗体的方法：

　　 var ShowUrl=function(_url,_title,_width,_height,_resizable)
        {
           
            var TempWin=new Ext.Window({
   title:_title,
   width:_width,
   height:_height,  
   plain:true,
   layout:"form",
   iconCls:"addicon",
   //不可以随意改变大小
   resizable:_resizable,
   //是否可以拖动
   //draggable:false,
   defaultType:"textfield",
   labelWidth:100,
   collapsible:true, //允许缩放条
            closeAction : 'hide',
            closable:true,
            //弹出模态窗体
   modal: 'true',
   buttonAlign:"center",
   bodyStyle:"padding:10px 0 0 15px",
    html:'<iframe id="iframeA" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+_url+'"></iframe>'
 
 });
 TempWin.show();
       
        }

上传页面：

 paramsArray = Util.CommonClass.GetStringQueryString("paramsArray");

 

　　上传的时候调用Handler： UploadHandler.ashx

　　

 context.Response.ContentType = "text/plain";
        context.Response.Charset = "utf-8";

        HttpPostedFile file = context.Request.Files["Filedata"];
        string[] paramsArrays = context.Request["folder"].Split('$');
        string uploadPath =  HttpContext.Current.Server.MapPath(paramsArrays[0]) + "\\";
        Model.ReceivingManage.HouseRegReceivingItem m_HouseRegReceivingItem = new Model.ReceivingManage.HouseRegReceivingItem();
         System.Reflection.PropertyInfo[] m_PropertyInfos = m_HouseRegReceivingItem.GetType().GetProperties();
        for (int i = 1; i < paramsArrays.Length; i++)
        {
            for (int j = 0; j < m_PropertyInfos.Length; j++)
            {
                string[] para = paramsArrays[i].Split(':');
                if (para.Length > 1)
                {
                    if (para[0].Equals(m_PropertyInfos[j].Name))
                    {
                        m_PropertyInfos[j].SetValue(m_HouseRegReceivingItem, Convert.ChangeType(para[1], m_PropertyInfos[j].PropertyType), null);
                        break;
                    }
                }
            }
        }
       
        if (file != null)
        {
            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }
            file.SaveAs(uploadPath + file.FileName);
            m_HouseRegReceivingItem.FileName = System.IO.Path.GetFileName(file.FileName);
            m_HouseRegReceivingItem.ContentType = file.ContentType;
            Stream sm = file.InputStream;
            byte[] fileContent =new byte[sm.Length];
            sm.Read(fileContent,0,fileContent.Length);
            sm.Close();
            m_HouseRegReceivingItem.FileContent = fileContent;
            m_HouseRegReceivingItem.CreateTime = DateTime.Now;
            if (!Bussiness.ReceivingManage.HouseRegReceivingItemB.Add(m_HouseRegReceivingItem).IsSuccess)
            {
                throw new Exception("上传失败！");
            }
            //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
            context.Response.Write("1");
        }
        else
        {
            context.Response.Write("0");
        }

 

这样就实现了图片上传！