利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能。
如果只是预览而不上传,可以使用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无刷新图片上传及预览功能相关推荐
- html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
- php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- js html怎么加入图片,js实现图片上传并预览功能
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个 标签,在图片上传之后,用新图片的src替换原来 标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对 ...
- html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
- php+jquery实现图片上传预览_和拖动位置值,PHP教程:thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
最新文章
- 链表问题16——单链表的选择排序(python版本)
- ArcGIS实现在线与线交叉处打断线(批量)
- c语言小数点进制转换,新手求教,关于含小数的二进制转换成十进制
- Spring 整合 aspectj 框架实现的 aop
- 牛客 - 丁姐姐喜欢Fibonacci(找规律+思维)
- java runtime 返回值_Java Runtime.exec()注意事项 | 学步园
- 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
- deeplung代码实现主题讲解
- 编译成功,但引用之后报错undefined symbol: _ZN10tensorflow7strings6StrCatERKNS0_8AlphaNumE
- java 中append()_调用append()方法在Java中构造一个StringBuffer对象
- mysql exporter怎么配置_mysqld_exporter的源码分析和定制化(单个mysqld_exporter监控多个数据库实例)...
- svn: E155007 和 E155004
- Kubernetes持久化方案(PV、PVC、StorageClass)
- IBM为北约创建云计算系统用于军情分析
- matlab电气教程下载,Matlab 2020b介绍及下载安装步骤
- java ico图片转png_Java图片处理:ico格式转 PNG/JPG等格式
- 《FFmpeg从入门到精通》读书笔记(五)
- 实用工具WGestures全局鼠标手势
- 关于cpu-z,everest,IntelCoreSeries的一些认识
- 安全无污染的激活win7(官方)
热门文章
- 如何提升网站在搜索引擎中的排名?
- 网站建设前的准备工作你了解多少?
- mycat mysql好可用架构_想要学会MyCat高可用集群搭建,但是这些知识点却还玩不明白?...
- win10系统svn服务器端安装步骤,win10系统安装svn服务器的解决步骤
- python勾股定理_Python学习第128课——在Python中实现醉汉随机游走
- android简化log输出方法
- Flutter基础知识链接汇总(持续更新中)
- Linux 学习之创建,删除文件和文件夹命令
- android从放弃到精通 第七天 tomorrow
- lucene .doc里存储的skiplist跳表