基于ASP.Net +easyUI框架上传图片，实现图片上传，提交表单
<body>
<link href="../../Easyui/themes/easyui.css" rel="stylesheet" type="text/css" />
<script charset="utf-8" src="../../Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script charset="utf-8" src="../../Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script charset="utf-8" src="../../Js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
//检查图片的格式是否正确,同时实现预览
function setImagePreview(obj, localImagId, imgObjPreview) {
var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
if (obj.value == '') {
$.messager.alert("让选择要上传的图片!");
return false;
}
else {
var fileContentType = obj.value.match(/^(.*)(\.)(.{,})$/)[]; //这个文件类型正则很有用
////布尔型变量
var isExists = false;
//循环判断图片的格式是否正确
for (var i in array) {
if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
//图片格式正确之后，根据浏览器的不同设置图片的大小
if (obj.files && obj.files[]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '200px';
imgObjPreview.style.height = '150px';
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(obj.files[]);
}
else {
//IE下，使用滤镜
obj.select();
var imgSrc = document.selection.createRange().text;
//必须设置初始大小
localImagId.style.width = "200px";
localImagId.style.height = "150px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
$.messager.alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
isExists = true;
return true;
}
} if (isExists == false) {
$.messager.alert("上传图片类型不正确!");
return false;
}
return false;
}
} //显示图片
function over(imgid, obj, imgbig) {
//大图显示的最大尺寸 4比3的大小 400 300
maxwidth = ;
maxheight = ; //显示
obj.style.display = "";
imgbig.src = imgid.src; //1、宽和高都超过了，看谁超过的多，谁超的多就将谁设置为最大值，其余策略按照2、3
//2、如果宽超过了并且高没有超，设置宽为最大值
//3、如果宽没超过并且高超过了，设置高为最大值 if (img.width > maxwidth && img.height > maxheight) {
pare = (img.width - maxwidth) - (img.height - maxheight);
if (pare >= )
img.width = maxwidth;
else
img.height = maxheight;
}
else if (img.width > maxwidth && img.height <= maxheight) {
img.width = maxwidth;
}
else if (img.width <= maxwidth && img.height > maxheight) {
img.height = maxheight;
}
};
//保存信息
function submitForm() {
//先上传图片后，再提交
upLoadFile();
var test = document.getElementById("test").value = "add";
var tbName = document.getElementById("tbName").value;
var idFile = document.getElementById("idFile").value;
//先判断是否上传图片之后在提交
$('#ff').form('submit', {
url: "../../Handler/add.ashx?tbName=" + tbName + "&idFile=" + idFile + "&test=" + test,
dataType: "json",
onSubmit: function () {
if ($(this).form('validate'))
return true;
else {
return false;
}
},
success: function (data) {
var dataJson = $.parseJSON(data);
if (dataJson.success) {
$("#add_address").dialog('destroy'); //销毁dialog对象
$.messager.alert("提示", dataJson.msg)
$("#dateList").datagrid("reload").datagrid('clearSelections').datagrid('clearChecked'); } else {
$("#add_address").dialog('destroy'); //销毁dialog对象
$.messager.alert("提示", dataJson.msg)
}
}
});
} //上传图片
function upLoadFile() {
var idFile = document.getElementById("idFile").value;
//判断是否选择图片
var options = {
type: "POST",
url: '../../Handler/InputImg.ashx'
//success: showResponse
};
// 将options传给ajaxForm
$('#ff').ajaxSubmit(options);
}
</script>
<form id="ff" runat="server" method="post">
<table style="width: 422px; margin-top: 20px; height: 91px;">
<tr>
<th style="text-align: right; width: 100px;" class="style1">
链接名称：
</th>
<td style="text-align: left" class="style1">
<asp:TextBox ID="tbID" runat="server" Style="display: none"></asp:TextBox>
<asp:TextBox ID="tbName" runat="server" Width="274px" Height="20px" class="easyui-validatebox"
data-options="required:true"></asp:TextBox>
</td>
</tr>
<tr>
<th style="text-align: right; " class="style2">
链接logo：
</th>
<td class="style3">
<div style="width: 307px; height: 22px;">
选择图片:<input id="idFile" style="width: 224px" runat="server" name="idFile" onchange="javascript:setImagePreview(this,localImag,preview);"
type="file" />
</div>
<%--预 览:
<div id="localImag"> <img id="preview" onclick="over(preview,divImage,imgbig);" src="" style="width: 200px;
height: 150px;" />
</div>--%>
</td>
</tr>
</table>
<div style="width: 325px; text-align: center; margin-top: 20px; margin-left: 50px">
<input type="hidden" id="test" name="test" />
<a id="btn_sc" href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">
上传</a>
<a href="Friendly.aspx" class="easyui-linkbutton">取消</a>
</div>
</form>
</body>
提交表单的一般处理程序：
BLL.J_Friendly frend = null;
Model.J_Friendly fr = null;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string command = context.Request["test"].ToString();//前台传的标示值
if (command == "add")
{
AddFrend(context);
}
if (command == "update")
{
UpdateFrend(context);
}
} public void AddFrend(HttpContext context)
{
frend = new BLL.J_Friendly();
fr = new Model.J_Friendly();
string tbName = context.Request.QueryString["tbName"].Trim();
if (frend.Exists("F_Name='" + tbName + "'"))
{
context.Response.Write("{\"msg\":\"添加失败，链接名称与已有的链接名称重复！\",\"success\":false}");
return;
}
else
{ try
{
fr.F_Name = context.Request.QueryString["tbName"].Trim(); }
catch
{
context.Response.Write("{\"msg\":\"添加失败，请核对信息！\",\"success\":false}");
return;
}
try
{
string img = context.Request.QueryString["idFile"].Trim();
if (img == "")
{
context.Response.Write("{\"msg\":\"添加失败，请核对图片信息！\",\"success\":false}");
return;
}
else
{
string str = context.Request.QueryString["idFile"].Trim();
string str1 = str.Remove(, str.LastIndexOf("\\") + );
fr.F_Img = "../../Upload/Images/" + str1;
} }
catch
{
context.Response.Write("{\"msg\":\"添加失败，请核对信息！\",\"success\":false}");
return;
}
}
if (frend.Add(fr) > )
{
context.Response.Write("{\"msg\":\"添加成功！\",\"success\":true}");
}
else
{
context.Response.Write("{\"msg\":\"添加失败，请核对信息！\",\"success\":false}");
}
}
原型图：
上传图片时，需要jquery.form.js的js文件，下载地址：http://download.csdn.net/detail/jiuqiyuliang/6919517
基于ASP.Net +easyUI框架上传图片，实现图片上传，提交表单的更多相关文章
- thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成
目录 1.案例 1.1图片上传 1.2进行图片木马检测 1.3缩略图生成 1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...
- 如何用elementui去实现图片上传和表单提交，用axios的post方法
下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...
- 基于ASP.Net +easyUI框架上传图片，判断格式+实现即时浏览
<div> 选择图片:<input id="idFile" style="width:224px" runat="server&qu ...
- 基于Http原理实现Android的图片上传和表单提交
版权声明:本文由张坤 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/794875001483009140 来源:腾云阁 ...
- SSM框架中如何简便上传文件表单
此种方式上传文件相对简单,以下均经测试成功,才提供到此. 以下为单个文件上传方式 分析:本次的工作目的是根据一级标题产生对应的二级标题,在每个二级标题下对应一个(file字段)新闻文件,当点击新闻文件 ...
- 基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...
- [Asp.net core 2.0]Ueditor 图片上传
摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
随机推荐
- struts2对一些属性的使用和对session封装对象类型采用jstl技术的遍历（配图解）
在struts2中如何实现像jsp中request,session,appliaction的使用.其实有两种方法.下面通过一个案列来说明两个方法的使用. 先写一个test.java类 packagec ...
- Flume-NG + HDFS + HIVE 日志收集分析
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 理解Web标准（网站标准）
我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...
- VPW协议解析
http://www.dpfdoctor.net/content/?220.html SAE J1850 VPW协议也是OBD II标准中的一种,通常应用于GM车系中. VPW英文全称是Variabl ...
- IPv6 相关的工作简介
这里说明下,仅仅是IPv6在开发板上的相关的工作简介,没有很详细,都是自己一边积累,一边实践的.能帮助其他人最好,也算是给自己做个备忘录. 一.首先说下DHCPv6相关的.这里我使用的是DHCP6s. ...
- 如何在C#中使用全局鼠标、键盘Hook
今天,有个同事问我,怎样在C#中使用全局钩子?以前写的全局钩子都是用unmanaged C或C++写个DLL来实现,可大家都知道,C#是基于.Net Framework的,是managed,怎么实现全 ...
- C# API: 生成和读取Excel文件
我们想为用户提供一些数据,考虑再三, 大家认为对于用户(人,而非机器)的可读性, Excel文件要好一些. 因为相比csv,xml等文件, Excel中我们可以运用自动筛选, 窗口锁定, 还可以控制背 ...
- 【JavsScript】JavaScript MVC 框架技术选型
你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...
- onConfigurationChanged is not called&& 翻转屏幕不执行onConfigurationChanged方法&&onConfigurationChanged不执行
我总结出一句话: 如果target sdk>=13,必须使用如下方式声明activity:android:configChanges="orientation|screenSize&q ...
- 字典树（Trie）的java实现
一.定义 字典树又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它的优点是:利用 ...