第一,引用JS这个我不多说了,要引用uploadify
第二、根据jqery.uploadify.v2.1.0.js 里面所需要的参数在 view层配置相应参数
因为要实现如图所示的操做
选择附件是我可以把原来有的附件给冲掉,点删除以后,我点击重置按钮可以把元数据给待会来
附上JS:
//上传
$('#fileInput1').uploadify({
'uploader': '@Url.Content("~/Content/Album/uploadify.swf")', //浏览按钮swf
'script': '/Activity/AttachmentUpload', //调用方法
'cancelImg': '@Url.Content("~/Content/Album/cancel.png")', // 取消图片
'fileExt': '*.*', //过滤类型-可以上传所有
'fileDesc': '*.*', //提示信息
'sizeLimit': 1024 * 1024 * 20, //20M
'multi': false, //是否批量
'onComplete': UpComplete,
'buttonImg': '@Url.Content("~/Content/images/attachment1.jpg")',
'height': 21,
'width': 80
});
//重新上传
$('#fileInput2').uploadify({
'uploader': '@Url.Content("~/Content/Album/uploadify.swf")', //浏览按钮swf
'script': '/Activity/AttachmentUpload', //调用方法
'cancelImg': '@Url.Content("~/Content/Album/cancel.png")', // 取消图片
'fileExt': '*.*', //过滤类型-可以上传所有
'fileDesc': '*.*', //提示信息
'sizeLimit': 1024 * 1024 * 20, //20M
'multi': false, //是否批量
'onComplete': UpComplete,
'buttonImg': '@Url.Content("~/Content/images/attachment1.jpg")',
'height': 21,
'width': 80
});
HTML页面设计:
@if (@ViewBag.ConTitle == "修改通知")
{<input type="hidden" name="hidOldAccessoryAddr" id="hidOldAccessoryAddr" value="@Model.UCDiscuss.DISCUSS_AFFIX" />}
<td width="89%" colspan="3">
@if (Model.UCDiscuss != null && !string.IsNullOrEmpty(Model.UCDiscuss.AFFIX_OLDNAME))
{
<div class="published_1_4" id="divuploadfile">
<table>
<tr>
<td style="width: 65px; height: 20px">
<a href="#" onclick="@string.Format("DownLoad('{0}','{1}','{2}')", ViewBag.FileDownloadPath, Model.FilePath, Model.UCDiscuss.AFFIX_OLDNAME)">@Model.UCDiscuss.AFFIX_OLDNAME</a>
</td>
<td style="text-align: center; width: 50px; height: 20px">
<a href="#" style="color:Red;" onclick="DeleteUpload('@Model.UCDiscuss.AFFIX_OLDNAME')">
删除</a>
</td>
</tr>
</table>
</div>
<div class="published_1_4">
<table>
<tr>
<td colspan="2" style="width: 100%; height: 20px">
<input id="fileInput2" name="fileInput2" type="file" />(请选择5M以内的文件,超过5M的文件上传较慢,而且不稳定,最大支持20M文件上传。)
</td>
</tr>
</table>
</div>
}
else
{
<div class="published_1_4">
<table>
<tr>
<td colspan="2" style="width: 100%; height: 20px">
<input id="fileInput1" name="fileInput1" type="file" />(请选择5M以内的文件,超过5M的文件上传较慢,而且不稳定,最大支持20M文件上传。)
</td>
</tr>
</table>
</div>
}
第三:在页面提交的时候触发 ajax 调用 AlbumUpLoad 方法 即Controller层的方法
HttpPostedFileBase fileData = null;
[HttpPost]
public ContentResult AttachmentUpload(string p_oldFileName)
{
string filePath = "";
string fileName = "";
string SavefileName = "";
try
{
//ACT_NOTICE notice = new ACT_NOTICE();
// 判断是否有上传附件
if (Request.Files.Count != 0)
{
// 获取上传文件
fileData = Request.Files[0];
// 原附件名称
fileName = fileData.FileName;
//设置文件名+获取文件扩展名
SavefileName = DateTime.Now.ToString("yyyyMMddHHmmssfffffff") + Path.GetExtension(fileData.FileName);
// 生成要存档的 文件路径和文件名
filePath = Path.Combine(ConfigurationManager.AppSettings["AccessoryPathUp"].ToString(), SavefileName);
//上传服务器
fileData.SaveAs(filePath);
// 删除旧的文件
if (!string.IsNullOrEmpty(p_oldFileName))
{
FileDelete(p_oldFileName);
}
}
}
catch
{
SavefileName = "";
}
return Content(fileName + "," + SavefileName);
}
第四、如果是用户的话,想换附件的时候 会想看看软来上传的附件是什么 需不需要冲掉,
那么点击附件名字 可以下
//下载文件 判断是否存在
// p_FileAddr 验证上传的附件是否存在,不存在给出提示
// FilePath 附件的物理路径
// p_FileName 附件原名,用处是为了在页面显示和附件不存在时大的提示信息
function DownLoad(p_FileAddr, p_FilePath, p_FileName)
{
// 判断是否存在
$.getJSON("/Common/CheckFile", { p_FileAddr: p_FileAddr }, function (data)
{
if (data == "false")
{
//不存在
var info = "您下载的" + p_FileName + "不存在,请联系管理员!"
alert(info);
}
else
{
//存在
location.href = '/Common/DownLoad?p_FilePath=' + p_FilePath;
}
});
}
载
附上和上面JS对应的 Controller的方法
///<summary>
///检查文件在服务器上是否存在
///</summary>
///<returns>“true”--存在 “false”--不存在</returns>
///<param name="p_FileAddr">文件地址(上传的文件地址。带文件名)</param>
public JsonResult CheckFile(string p_FileAddr)
{
//上传服务器的路径
string path = Path.Combine(ConfigurationManager.AppSettings["AccessoryPathUp"].ToString(), p_FileAddr);
FileInfo file = new FileInfo(p_FileAddr);
if (file.Exists)
{
return Json("true", JsonRequestBehavior.AllowGet);
}
else
{
return Json("false", JsonRequestBehavior.AllowGet);
}
}
///<summary>
///下载指定文件
///</summary>
///<returns>View</returns>
///<param name="p_FilePath">文件地址(下载传文件地址。带文件名)</param>
public ActionResult DownLoad(string p_FilePath)
{
FileHelper.FileDownload(p_FilePath);
return View();
}
附上Common曾调用的 FileHelper里的方法
/// <summary>
/// 网络文件下载
/// </summary>
/// <param name="p_strUrl">网络地址</param>
/// <returns>true-下载成功 false-下载失败</returns>
public static bool FileDownload(string p_strUrl)
{
try
{
WebRequest webRequest = WebRequest.Create(p_strUrl);
//读取文件流
Stream stream = webRequest.GetResponse().GetResponseStream();
byte[] fileByte = new byte[512];
MemoryStream ms = new MemoryStream();
int index = 0;
while (true)
{
index = stream.Read(fileByte, 0, fileByte.Length);
if (index == 0)
{
break;
}
//写进内存流
ms.Write(fileByte, 0, index);
}
byte[] array = ms.ToArray();
string[] filename = p_strUrl.Split('/');
//添加文件头
System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", HttpUtility.UrlEncode(filename[filename.Length - 1]), System.Text.Encoding.UTF8));
System.Web.HttpContext.Current.Response.AddHeader("Content-Length", array.Length.ToString());
System.Web.HttpContext.Current.Response.ContentType = "application/octet-stream";
System.Web.HttpContext.Current.Response.Charset = "UTF-8";
System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;
System.Web.HttpContext.Current.Response.BinaryWrite(array);
System.Web.HttpContext.Current.Response.Flush();
System.Web.HttpContext.Current.Response.Clear();
}
catch(Exception e)
{
throw (e);
}
return true;
}
具体说下。。当删除的时候,我是用div来隐藏显示的
并在页面存放在隐藏域当中,具体HTML 在这里不贴出来了。。
新手学习,不足之处请大虾多多指教