jquery实现图片上传时预览

$(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");

}