Jquery上传图片,xml方式显示图片【1】
时间:2010-08-28 来源:会游泳dě鱼
一, 这里采用了网络上的上传组件,
<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,
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");
}
这样就实现了图片上传!