上传预览 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 ...
随机推荐
- HDU 1166 敌兵布阵(树状数组)
之前用过了线段树的做法,树状数组的也补上吧 #include<iostream> #include<cstdio> #include<cstring> using ...
- USACO Section 1.2 Dual Palindromes 解题报告
题目 题目描述 有一些数(如 21),在十进制时不是回文数,但在其它进制(如二进制时为 10101)时就是回文数. 编一个程序,从文件读入两个十进制数N.S.然后找出前 N 个满足大于 S 且在两种以 ...
- js浏览器兼容
//window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...
- ural1471 Distance in the Tree
Distance in the Tree Time limit: 1.0 secondMemory limit: 64 MB A weighted tree is given. You must fi ...
- [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exist 160913 02:11:21 mysqld_safe mysqld from pid file /tmp/mysql.pid ended
-- :: [Note] InnoDB: Renaming log file ./ib_logfile101 to ./ib_logfile0 -- :: [Warning] InnoDB: New ...
- 2014非专业知识学习---be smart
非专业部分--构建人生 以书籍和网易公开课为主 (1)理财&投资 基金投资相关,好的书籍? (2)哲学总览 <公正>这个看了大半,需要总结归纳. (必选) 同时结合哲学史,归纳西 ...
- 路过Haxe
刚才在看Nape的时候,看到Haxe的代码,意外的感觉到亲切. 因为之前写过as2代码,最近学习了python,所以对haxe看起来很亲切,于是路过一下写了个HelloWorld. 另外,估计很长时间 ...
- Keil MDK下如何设置非零初始化变量(转)
源:Keil MDK下如何设置非零初始化变量 一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默 ...
- bzoj-4318 OSU! 【数学期望】
Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1 ...
- 全方位分析Objcetive-C Runtime 分类: ios技术 2015-03-11 22:29 77人阅读 评论(0) 收藏
本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...