MVC图片上传

1、引用

<script src="@Url.Content("~/Content/js/lib/swfupload/swfupload.js")"></script>

<script src="@Url.Content("~/Content/js/lib/swfupload/swfupload.cookies.js")"></script>

<script src="@Url.Content("~/Content/js/lib/swfupload/handlers.js")"></script>

<link href="@Url.Content("~/Content/js/lib/swfupload/swfupload.css")" rel="stylesheet" />

2、 初始化

$(function () {

$("#CustomerFrom").validate(); //开启验证

Xian();

var postUrl = "@EHECD.Bll.BllHelper.ImgUrl";

var filelist = 'roomPic';

var postParams = {};

var swfRelativePath = "/Content/js/lib/swfupload/";

var buttonId = 'btnPicUpload', displayImgId = 'displayPic';

initSwfUpload(swfRelativePath, postUrl, buttonId, displayImgId, postParams, filelist, true, 100, "点击上传");

});

3、HTML

<tr>

<td class="title" style="font-weight:bold; text-align:left;" colspan="4">

图片附件

</td>

</tr>

<tr id="tr_AccessoryContent">

<td valign="middle" class="content">

<div id="btnPicUpload"></div>

</td>

<td colspan="3" style="padding:0px;">

<ol id="displayPic" class="log">

@{if (Accessory != null)

{

foreach (var item in Accessory)

{

var rad = "displayPicSWFUpload" + item.sPath;

var rad1 = rad;

var filename = rad + "_filename";

var progressvalue = rad + "_progressvalue";

var progressbar = rad + "_progressbar";

var progress = rad + "_progress";

var status = rad + "_status";

var stopUpload = rad + "_stopUpload";

<li id="@rad1" class="@rad1" imagesrc="@item.sPath">

<span id="@filename" class="filename" style="display: none;"></span>

<span id="@progressvalue" class="progressvalue" style="display: none;">100%</span>

<div id="@progressbar" class="progressbar" style="display: none;">

<div id="@progress" class="progress" style="width: 100%;">

</div>

</div>

<p id="@status" class="status" style="display: none;">上传中</p>

<span id="@stopUpload" onclick="javascript:obj=getID('@rad1');

t_obj=getID('displayPic');t_obj.removeChild(obj); deleteFilePath(roomPic, obj.getAttribute('imagesrc'));" class="stopUpload"> </span>

<img src="@item.sPath">

</li>

}

}

}

</ol>

<div id="roomPic" style="display:none">

@{if (Accessory != null)

{

foreach (var item in Accessory)

{

var path = "|" + @item.sPath;

@path

}

}

}</div>

</td>

</tr>

图片 路径读取 };

var accessory = [];//附件

var array = $("#roomPic").text().split('|');

for (var i = 0; i < array.length; i++) {

if (array[i] != undefined && array[i] != "")

accessory.push(array[i]);

}


插件在资源里面

4、.ashx

/// <summary>

/// Upload 的摘要说明

/// </summary>

public class Upload : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

HttpPostedFile file = context.Request.Files["Filedata"];

string sDate = DateTime.Now.ToString("yyyy-MM");

string uploadPath = System.AppDomain.CurrentDomain.BaseDirectory + "\\Files\\" + sDate + "\\";

if (file != null)

{

if (!Directory.Exists(uploadPath))

{

Directory.CreateDirectory(uploadPath);

}

string sExtension = System.IO.Path.GetExtension(file.FileName);//后缀名

string sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + sExtension;//组装大图文件名

//File.Create(uploadPath + sFileName);

file.SaveAs(uploadPath + sFileName);

//下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失

context.Response.Write("/Files/" + sDate + "/" + sFileName);

}

}

public bool IsReusable

{

get

{

return false;

}

}

}

5、web.config

<appSettings>

<add key="ClientValidationEnabled" value="true"/>

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

<!--系统名称-->

<add key="sysName" value="技优加汽车保养管理平台"/>

<!--本网站图片服务器地址-->

<add key="picUrl" value="/Helper/Upload.ashx" />

<!--本网站图片服务器地址-->

<!--<add key="picUrl" value="http://192.168.1.118:99" />-->

<!--<add key="picUrl" value="http://115.28.48.78:8099/Mall_Upload.ashx" />-->

<!--发送短信相关开始-->

<!--账号-->

<add key="account" value="SUD-KEY-010-00344" />

<!--密码-->

<add key="password" value="B9B7CC434E842F7C62ED4F9E7E961CC9" />

<!--密钥-->

<add key="MD5key" value="petty" />

<!--发送短信相关结束-->

<!--微信上是否开启授权登录 (1-是，0 - 不是)-->

<add key="isOpenOauthLogin" value="0" />

<!--订单成功提示信息 -->

<add key="MaintainHead" value="您的上门保养订单号为:" />

<add key="MaintainContent" value="为保证最佳服务质量，机油及配件需与车型匹配，技优加客服将与您电话联系，确认服务信息。请保持通话畅通，谢谢！" />

<add key="RepairHead" value="您的车辆报修订单号为:"/>

<add key="RepairContent" value="技优加客服将尽快与您电话联系，确认报修信息。请保持通话畅通，谢谢！" />

<add key="InsuranceHead" value="您的保险订单号为:"/>

<add key="InsuranceContent" value="技优加客服将尽快与您电话联系，沟通保单细节。请保持通话畅通，谢谢！" />

<add key="AuditHead" value="您的车辆代审订单号为:"/>

<add key="AuditContent" value="技优加客服将尽快与您电话联系，确认服务信息。请保持通话畅通，谢谢！" />

<!--订单成功提示信息 -->

<add key="DefaultPic" value="http://tp2.sinaimg.cn/3952070245/180/5733145813/0" />

<add key="webpages:Version" value="2.0.0.0"/>

<add key="PreserveLoginUrl" value="true"/>

</appSettings>