(觉得挺全面就转载啦,下次直接使用)
1、存储配置信息
在web.config中,添加配置信息节点
<appSettings>
<add key="UploadPath" value="D:\Uploads" />
</appSettings>
2、图片上传
html页面中
<div class="leftImage">
<input type="file" id="picAjax" class="customButton"/>
<span id="uploadInfo"></span>
<input type="button" id="submitPic" class="customButton" value="上传" />
</div>
<div class="rightImage">
<img id="selImg" src="" alt="" />
</div>
js中,选择图片事件
var picString = "";
$("#picAjax").change(function (e) {
var file = e.delegateTarget.files[0];
if (file.type == 'image/jpeg' || file.type == 'image/png') {
$("#uploadInfo").text("图片格式正确,请点击提交按钮");
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (ret) {
picString = reader.result;
//预览图片
$("#selImg").attr({ "src": picString });
}
}
else {
$("#uploadInfo").text("请上传jpg或png格式的图片!" );
}
});
js中,上传图片事件
$("#submitPic").click(function () {
if (picString != "") {
$.ajax("../SavePicture", {
type: "post",
datatype: "json",
data: {
picString: picString,
id: id
},
error: function () { },
success: function (result) {
if (result.suc == true) {
$("#uploadInfo").text("图片上传成功!");
$("#ImageList").empty();
ReadPicture();
}
}
});
}
});
C#中,保存图片
[HttpPost]
public ActionResult SavePicture(string picString,string id)
{
var tmpArr = picString.Split(',');
byte[] bytes = Convert.FromBase64String(tmpArr[1]);
MemoryStream ms = new MemoryStream(bytes);
ms.Write(bytes, 0, bytes.Length);
var img = Image.FromStream(ms, true);
var path = System.AppDomain.CurrentDomain.BaseDirectory;
var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id + "\\");
if (!System.IO.Directory.Exists(imagesPath))
System.IO.Directory.CreateDirectory(imagesPath);
string fileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo) + ".png";
var bitImage = GetThumbnailImage(img,400,300);
bitImage.Save(imagesPath + fileName);
bool isOk = true;
string msg = imagesPath + fileName;
return Json(new { suc = isOk, msg = msg });
}
//图片压缩
public static Image GetThumbnailImage(Image srcImage, int width, int height)
{
Image bitmap = new Bitmap(width, height);
Graphics g = Graphics.FromImage(bitmap);
//设置高质量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;
//在指定位置并且按指定大小绘制原图片的指定部分
g.DrawImage(srcImage, new Rectangle(0, 0, width, width),
new Rectangle(0, 0, srcImage.Width, srcImage.Height),
GraphicsUnit.Pixel);
return bitmap;
}
3、图片浏览和删除
html页面中
<div class="leftImage">
@Html.ListBoxFor(model => model.ImageList, (List<SelectListItem>)ViewBag.imageList, new { @class = "multipleList" })
<span id="deleteInfo"></span>
<input type="button" id="deletePic" class="customButton" value="删除" />
</div>
<div class="rightImage">
<img id="showImg" src="" alt="" />
</div>
js中,浏览和删除图片事件
@using Newtonsoft.Json;
var vData [email protected](JsonConvert.SerializeObject(ViewData));
var id = vData["id"];
var imgName = null;
$("#ImageList").on("change", function () {
imgName = $("option:selected", this).val();
var imgUrl = "../../Uploads/AgrCorporations/" + id + "/" + imgName;
$("#showImg").attr({ "src": imgUrl });
});
$("#deletePic").click(function () {
if (imgName == null) {
$("#deleteInfo").text("没有选择任何图片!");
}
else {
$.ajax("../DeletePicture", {
type: "GET",
datatype: "json",
data: {
id: id,
imgName: imgName
},
error: function () { },
success: function (result) {
$("#deleteInfo").text(result.deleteInfo);
$("#ImageList").empty();
$("#showImg").attr({ "src": "" });
ReadPicture();
}
});
}
});
function ReadPicture() {
$.ajax("../ReadPicture", {
type: "GET",
datatype: "json",
data: {
id: id
},
error: function () { },
success: function (data) {
$.each(data, function (i,item) {
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#ImageList"));
})
}
});
}
C#中读取图片
public ActionResult ReadPicture(string id)
{
//图片列表
var path = System.AppDomain.CurrentDomain.BaseDirectory;
var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id);
var imageList = new List<string>();
if (System.IO.Directory.Exists(imagesPath))
{
var files = System.IO.Directory.GetFiles(imagesPath, "*.*", SearchOption.TopDirectoryOnly).Where(s => s.EndsWith(".png") || s.EndsWith(".PNG") || s.EndsWith(".jpg") || s.EndsWith(".JPG"));
var filesName = files.Select(p => System.IO.Path.GetFileName(p));
var imagesURL = filesName.Select(p =>
{
return p;
});
var imagesQuery = from name in imagesURL
orderby name descending
select name;
if (imagesQuery.ToArray().Length > 0)
{
imageList = imagesQuery.ToList();
}
}
List<SelectListItem> ImageList = imageList.Select(p => new SelectListItem() { Text = p, Value = p }).ToList();
ViewBag.imageList = ImageList;
return Json(ImageList, JsonRequestBehavior.AllowGet);
}
C#中删除图片
public ActionResult DeletePicture(string id,string imgName)
{
var path = System.AppDomain.CurrentDomain.BaseDirectory;
var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id + "\\");
var iFileName = imagesPath + imgName;
FileInfo f = new FileInfo(iFileName);
var deleteInfo = "";
try { f.Delete(); deleteInfo = "删除成功!"; }
catch { }
return Json(new { deleteInfo = deleteInfo}, JsonRequestBehavior.AllowGet);
}