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

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

好了,进入正题吧,首先附上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

转载于:https://www.cnblogs.com/lxc89/p/3230555.html

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

  1. html ajax 图片上传,Ajax实现图片上传并预览功能

    先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...

  2. php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例

    这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...

  3. php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...

    这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...

  4. js html怎么加入图片,js实现图片上传并预览功能

    思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个 标签,在图片上传之后,用新图片的src替换原来 标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对 ...

  5. html5拖拽图片批量ajax无刷新进度上传

    1.前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...

  6. php+jquery实现图片上传预览_和拖动位置值,PHP教程:thinkphp jquery实现图片上传和预览效果...

    <PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...

  7. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  8. ajax上传图片并显示,Ajax实现图片上传并预览

    效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

  9. Ajax实现图片上传并预览

    效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...

最新文章

  1. 链表问题16——单链表的选择排序(python版本)
  2. ArcGIS实现在线与线交叉处打断线(批量)
  3. c语言小数点进制转换,新手求教,关于含小数的二进制转换成十进制
  4. Spring 整合 aspectj 框架实现的 aop
  5. 牛客 - 丁姐姐喜欢Fibonacci(找规律+思维)
  6. java runtime 返回值_Java Runtime.exec()注意事项 | 学步园
  7. 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
  8. deeplung代码实现主题讲解
  9. 编译成功,但引用之后报错undefined symbol: _ZN10tensorflow7strings6StrCatERKNS0_8AlphaNumE
  10. java 中append()_调用append()方法在Java中构造一个StringBuffer对象
  11. mysql exporter怎么配置_mysqld_exporter的源码分析和定制化(单个mysqld_exporter监控多个数据库实例)...
  12. svn: E155007 和 E155004
  13. Kubernetes持久化方案(PV、PVC、StorageClass)
  14. IBM为北约创建云计算系统用于军情分析
  15. matlab电气教程下载,Matlab 2020b介绍及下载安装步骤
  16. java ico图片转png_Java图片处理:ico格式转 PNG/JPG等格式
  17. 《FFmpeg从入门到精通》读书笔记(五)
  18. 实用工具WGestures全局鼠标手势
  19. 关于cpu-z,everest,IntelCoreSeries的一些认识
  20. 安全无污染的激活win7(官方)

热门文章

  1. 如何提升网站在搜索引擎中的排名?
  2. 网站建设前的准备工作你了解多少?
  3. mycat mysql好可用架构_想要学会MyCat高可用集群搭建,但是这些知识点却还玩不明白?...
  4. win10系统svn服务器端安装步骤,win10系统安装svn服务器的解决步骤
  5. python勾股定理_Python学习第128课——在Python中实现醉汉随机游走
  6. android简化log输出方法
  7. Flutter基础知识链接汇总(持续更新中)
  8. Linux 学习之创建,删除文件和文件夹命令
  9. android从放弃到精通 第七天 tomorrow
  10. lucene .doc里存储的skiplist跳表