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>