某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能。
如果只是预览而不上传,可以使用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
如果觉得《利用jquery.form.js实现Ajax无刷新图片上传及预览功能》对你有帮助,请点赞、收藏,并留下你的观点哦!