MVC 3.0 对图片上传,修改时,删除替换,重置能带回原来的上传的资料

第一,引用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  在这里不贴出来了。。

  

  新手学习,不足之处请大虾多多指教

转载于:https://www.cnblogs.com/MVCASP/archive/2011/07/15/2107586.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值