上传预览 easyui部分控件获取focuse 表单验证
js:
$(document).ready(function () { //$('#creater').combobox({ // url: '/VMS.UI/BindData/ScheamData?type=26', // dataType: 'json' //}); $('#education').combobox({ url: '/VMS.UI/BindData/ScheamData?type=26', dataType: 'json' }); $('#job').combobox({ url: '/VMS.UI/BindData/ScheamData?type=24', dataType: 'json', value: '专职' }); $('#station').combobox({ url: '/VMS.UI/BindData/ScheamData?type=29', dataType: 'json' }); $('#org').combotree({ url: '/VMS.UI/BindData/OrgData', dataType: 'json', idFiled: 'IID', textFiled:'OrgName', onLoadSuccess: function () { $('#org').combotree('tree').tree("collapseAll"); }, onSelect: function (node) { $('#dept').combobox({ url: '/VMS.UI/BindData/GetDepartments?deptID=' + node.id, dataType: 'json', valueField: 'IID', textField: 'DeptName' }); } }); $(function () { $("#uploadpic").uploadPreview({ Img: "pic", Width: 120, Height: 120 }); }); function formValidate() { var station = $('#station').combobox('isValid'); var name = $('#name').validatebox('isValid'); var cardNumber = $('#cardNumber').validatebox('isValid'); var mobilePhone = $('#mobilePhone').numberbox('isValid'); var org = $('#org').combotree('isValid'); var dept = $('#dept').combobox('isValid'); var drivingCertificate = $('input[name="DrivingCertificate"]').validatebox('isValid'); if (!station) { $('#station').combobox().next('span').find('input').focus() return false; } if (!name) { $('#name').focus(); return false; } if (!cardNumber) { $('#cardNumber').focus() return false; } if (!mobilePhone) { $('#mobilePhone').focus() return false; } if (!org) { $('#org').combobox().next('span').find('input').focus() return false; } if (!dept) { $('#dept').combobox().next('span').find('input').focus() return false; } if (!drivingCertificate) { $('input[name="DrivingCertificate"]').focus() } return true; } $('#save').click(function () { if (formValidate()) { $('#form_driverinfo').submit(); } }); $('#clear').click(function () { $.messager.confirm('确认对话框', '是否确定清空?', function (r) { if (r) { $('#form_driverinfo').form('reset'); } }); }); });
MVC:
[HttpPost] public ActionResult AddVehicleDriver(VehicleDrivers driver) { if (driver.Picture != null) { HttpPostedFileBase file = Request.Files["Picture"]; if (file != null) { driver.Picture = SaveImgAndGetPath(file); } } } /// <summary> /// 保存图片并获取地址 /// </summary> /// <param name="file">文件</param> /// <returns>返回路径</returns> private string SaveImgAndGetPath(HttpPostedFileBase file) { //设置文件名+获取文件扩展名 string imgName = DateTime.Now.ToString("yyyyMMddHHmmss") + new Random().Next(1000, 9999).ToString() + Path.GetExtension(file.FileName); // 生成要存档的 文件路径和文件名 string serverPath = System.Web.HttpContext.Current.Server.MapPath("~"); string imgFullPath = Path.Combine(serverPath, @"UploadImage\driverImg\", imgName); //string imgPath = Path.Combine(Server.MapPath("/UploadImage/driverImg/"), imgName); //上传服务器 file.SaveAs(imgFullPath); string imgRelativePath = System.Web.HttpContext.Current.Request.ApplicationPath + @"\UploadImage\driverImg\" + string.Format("{0}", imgName); return imgRelativePath; }
jqueryExtends:
jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(this); opts = jQuery.extend({ Img: "ImgPr", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { } }, opts || {}); _self.getObjectURL = function (file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file) } else if (window.URL != undefined) { url = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file) } return url }; _this.change(function () { if (this.value) { if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种"); this.value = ""; return false } if ($.browser.msie) { try { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) } catch (e) { var src = ""; var obj = $("#" + opts.Img); var div = obj.parent("div")[0]; _self.select(); if (top != self) { window.parent.document.body.focus() } else { _self.blur() } src = document.selection.createRange().text; document.selection.empty(); obj.hide(); obj.parent("div").css({ 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 'width': opts.Width + 'px', 'height': opts.Height + 'px' }); div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src } } else { $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0])) } opts.Callback() } }) } });
上传预览 easyui部分控件获取focuse 表单验证的更多相关文章
- ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览
//plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- PHP WAMP 文件上传 及 简单的上传预览
...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...
- 单图上传预览(uploadpreview )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
随机推荐
- spider JAVA如何判断网页编码 (转载)
原文链接 http://www.cnblogs.com/nanxin/archive/2013/03/27/2984320.html 前言 最近做一个搜索项目,需要爬取很多网站获取需要的信息.在爬取网 ...
- 随机获取部分List<Object>集合
随机返回list对象 /** * 返回随机List * @param list 备选 * @param selected 备选数量 * @return */ public List getRandom ...
- Git 常用命令汇总
#安装git yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel yum install -y g ...
- 轻量级别的Cache和反向代理软件---Varnish
1.Varnish描述 1.1 Varnish的结构与特点 Varnish是一个轻量级别的Cache和反向代理软件,先进的设计理念和成熟的设计框架是Varnish的主要特点: 基于内存进行缓存,重启后 ...
- a标签的target的四个值
特殊的目标 有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签 ...
- static DEVICE_ATTR(val, S_IRUGO | S_IWUSR, hello_val_show, hello_val_store); 的作用
在 老罗的android例程里面有 static DEVICE_ATTR(val, S_IRUGO | S_IWUSR, hello_val_show, hello_val_store); /*读取设 ...
- corosync集群的选举算法
<Cluster Concepts> http://linux-ha.org/wiki/Cluster_Concepts <Managing Computers with Autom ...
- 缩进(Python很将就格式)
空白在Python中是重要的.事实上行首的空白是重要的.它称为缩进.在逻辑行首的空白(空格和制表符)用来决定逻辑行的缩进层次,从而用来决定语句的分组.这意味着同一层次的语句必须有相同的缩进.每一组这样 ...
- Apache处理请求步骤及过程
Apache请求处理循环详解 : 1.Post-Read-Request阶段: 在正常请求处理流程中,这是模块可以插入钩子的第一个阶段.对于那些想很早进入处理请求的模块来说,这个阶段可以被利用. 2. ...
- Linux 分区和目录解析
转自:http://www.cnblogs.com/apprentice89/archive/2012/12/17/2821332.html 计算机中存放信息的主要的存储设备就是硬 盘,但是硬盘不能直 ...