利用jquery.form.js实现Ajax无刷新图片上传及预览功能

某些时候当我们做登记页面的时候可能需要上传图片，并实现即时预览的功能。

如果只是预览而不上传，可以使用ImagePreview来实现，方便简单。如果需要上传，那么你也可以使用uploadify无刷新上传插件来实现，并在上传完毕后更改img标签的src路径来实现预览功能，此插件自带php实例，网上也有很多的实例可供参考。

好了，进入正题吧，首先附上HTML代码：

<asp:Image ID="imgexper" Width="129px" Height="172px" ImageUrl="~/images/nophoto.gif"runat="server" /><div><asp:FileUpload ID="fuimg" runat="server" οnchange="if(this.value)ispic(this.value,this);" /><asp:HiddenField ID="hfpath" runat="server" /></div>

JS代码：

//======去除空格

String.prototype.Trim = function () {

return this.replace(/(^\s*)|(\s*$)/g, "");

}

//======根据ID获取对象的值并去除空格

var $val = function (id) {

if (typeof id == "string") {

try {

return document.getElementById(id).value.Trim();

}

catch (Error) {

alert("ID错误！");

}

}

else if (typeof id == "object") {

try {

return id.value.Trim();

}

catch (Error) {

alert("参数错误！");

}

}

else {

alert("参数错误！");

}

};

function ispic(file, node) {var pic = "../images/"；if (file) {var suffix = file.split(".");var num = suffix.length - 1;var name = suffix[num].toLowerCase();if (name != "jpeg" && name != "jpg" && name != "gif" && name != "bmp" && name != "png") {alert("上传类型错误，暂只支持.jpeg|.jpg|.gif|.bmp|.png格式！");node.outerHTML = node.outerHTML;clearphoto(pic); //清理 }else {var oldpath = $val("hfpath");var pageurl = "ExpertPhotoAjax.aspx?oldpath=" + oldpath;var options = {url: pageurl,type: "POST",dataType: "HTML",beforeSend: function () {document.getElementById("imgexper").src = pic + "wating.gif";},success: function (path) {if (path != "") {var links = path.split(",");document.getElementById("hfpath").value = links[0];document.getElementById("imgexper").src = links[1];}else {clearphoto(pic);alert("加载失败，请重新选择图片！");}},error: function () {clearphoto(pic);alert("加载失败，请重新选择图片！");}};// 将options传给ajaxFormjQuery('#form1').ajaxSubmit(options);}}}function clearphoto(pic) {document.getElementById("hfpath").value = "";document.getElementById("imgexper").src = pic + "noimg.gif";}

C#代码：

//变量定义string oldpath = Request.QueryString["oldpath"].ToString();string path = "";//删除之前上传的图片if (oldpath != ""){oldpath = HttpContext.Current.Server.MapPath(oldpath);if (System.IO.File.Exists(oldpath)){System.IO.File.Delete(oldpath);}}//上传新图片try{HttpFileCollection files = Context.Request.Files;if (files.Count > 0){string photoname = DateTime.Now.ToString("yyyyMMddHHmmss");HttpPostedFile file = files[0];if (file.ContentLength > 0){//创建目录path = "~/UpFile/Photos/";if (!Directory.Exists(HttpContext.Current.Server.MapPath(path))){Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path));}string fileName = file.FileName;string extension = Path.GetExtension(fileName);path += photoname + extension;file.SaveAs(HttpContext.Current.Server.MapPath(path));if (flag == 1)path += path.Replace("~/", ",");elsepath += path.Replace("~", ",..");}}}catch (Exception){path = "";}Response.Write(path);Response.End();

PS：使用的此方法的页面必须引用jquery.form.js