$(document).ready(function () {
//建议在#imgDiv的父元素上加个overflow:hidden;的css样式
$("#imageFile").uploadPreview({ width: 100, height: 100, imgDiv: "#imgDiv", imgType: ["bmp", "gif", "png", "jpg"] });
});
//说明：图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图
//参数设置：
//width 存放图片固定大小容器的宽
//height 存放图片固定大小容器的高
//imgDiv 页面DIV的JQuery的id
//imgType 数组后缀名
//**********************图片上传预览插件*************************
(function ($) {
jQuery.fn.extend({
uploadPreview: function (opts) {
opts = jQuery.extend({
width: 0,
height: 0,
imgDiv: "#imgDiv",
imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function () { return false; }
}, opts || {});
var _self = this;
var _this = $(this);
var imgDiv = $(opts.imgDiv);
imgDiv.width(opts.width);
imgDiv.height(opts.height);
autoScaling = function () {
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
var img_width = imgDiv.width();
var img_height = imgDiv.height();
if (img_width > 0 && img_height > 0) {
var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;
if (rate <= 1) {
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
imgDiv.width(img_width * rate);
imgDiv.height(img_height * rate);
} else {
imgDiv.width(img_width);
imgDiv.height(img_height);
}
var left = (opts.width - imgDiv.width()) * 0.5;
var top = (opts.height - imgDiv.height()) * 0.5;
imgDiv.css({ "margin-left": left, "margin-top": top });
imgDiv.show();
}
}
$("#imageFile").change(function () {
if (this.value) {
if (!RegExp("/.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");
this.value = "";
return false;
}
imgDiv.hide();
if ($.browser.msie) {
if ($.browser.version == "6.0") {
var img = $("<img />");
imgDiv.replaceWith(img);
imgDiv = img;
var image = new Image();
image.src = 'file:///' + this.value;
imgDiv.attr('src', image.src);
autoScaling();
}
else {
imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
try {
imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value;
} catch (e) {
alert("无效的图片文件！");
return;
}
setTimeout("autoScaling()", 100);
}
}
else {
var img = $("<img />");
imgDiv.replaceWith(img);
imgDiv = img;
imgDiv.attr('src', this.files.item(0).getAsDataURL());
imgDiv.css({ "vertical-align": "middle" });
setTimeout("autoScaling()", 100);
}
}
});
}
});
})(jQuery);
<form name="uploadForm" id="uploadForm" action="/BackEnd/MerchantMgr/DoAddPic" target="uploadResponse"
method="post" enctype="multipart/form-data">
<input type="file" name="imageFile" id="imageFile" /><br />
<div >
<div id="imgDiv">
</div>
</div>
<input type="button" name="btnAddBrand" value="确定" />
</form>
public ActionResult DoAddPic(FormCollection collection)
{
if (Request.Files.Count == 0) //提交表单的file
{
return View("AddMerchant");
}
for (int i = 0; i < Request.Files.Count; i++)
{
var pic = Request.Files[i];
if (pic != null && pic.ContentLength > 0)
{
System.Drawing.Image image = System.Drawing.Image.FromStream(pic.InputStream);
int width = image.Width;
int height = image.Height;
image.Dispose();
if (pic.ContentLength < 1024 * 1024 * 2 && width <= 600 && height <= 600)
{
if (pic.ContentType.CompareTo("image/pjpeg") == 0 ||
pic.ContentType.CompareTo("image/jpeg") == 0 ||
pic.ContentType.CompareTo("image/gif") == 0 ||
pic.ContentType.CompareTo("image/x-png") == 0 ||
pic.ContentType.CompareTo("image/png") == 0) //过滤格式
{
string fileName = pic.FileName;
//图片路径保存
string originalImagePath = "~//Uploads//MerchantImages";
//图片访问路径
string filePath = "/Uploads/MerchantImages/" + fileName;
string fileNamePath = Path.Combine(Server.MapPath(originalImagePath), fileName);
//保存图片
pic.SaveAs(fileNamePath);
}
}
}
}
return RedirectToAction("AddMerchant");
}