<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框架上传图片,实现图片上传,提交表单的更多相关文章

  1. thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成

    目录 1.案例 1.1图片上传  1.2进行图片木马检测   1.3缩略图生成   1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...

  2. 如何用elementui去实现图片上传和表单提交,用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  3. 基于ASP.Net +easyUI框架上传图片,判断格式+实现即时浏览

    <div> 选择图片:<input id="idFile" style="width:224px" runat="server&qu ...

  4. 基于Http原理实现Android的图片上传和表单提交

    版权声明:本文由张坤  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/794875001483009140 来源:腾云阁  ...

  5. SSM框架中如何简便上传文件表单

    此种方式上传文件相对简单,以下均经测试成功,才提供到此. 以下为单个文件上传方式 分析:本次的工作目的是根据一级标题产生对应的二级标题,在每个二级标题下对应一个(file字段)新闻文件,当点击新闻文件 ...

  6. 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

  7. [Asp.net core 2.0]Ueditor 图片上传

    摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...

  8. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  9. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

随机推荐

  1. PHP操作MongoDB数据库

    http://blog.csdn.net/sunboy_2050/article/details/49449319

  2. silverlight调用MVC WebApi方法

    1.创建ASP.NET MVC4 Web应用程序,选择WebAPI模板 2.添加silverlight项目 3.新建一个数据模型类,代码如下: using System; using System.C ...

  3. linux系统命令解析(0基础篇)

    经常使用命令 ctrl+W+T    当进入gvim文档编辑界面后,假设是C文件,能够列出当前文件里的全部函数. Shift+*    当进入gvim文档编辑页面,能够搜索当前keyword. ech ...

  4. IIS 7.0 and Web Farms

    1. IIS 6 IIS 6.0 was capable of scaling out to virtually any number of web servers and had tools lik ...

  5. Codeforces Good Bye 2015 C. New Year and Domino 前缀和

    C. New Year and Domino 题目连接: http://www.codeforces.com/contest/611/problem/C Description They say &q ...

  6. MySQL CAST与CONVERT 函数的用法

    MySQL CAST与CONVERT 函数的用法 产生另一个类型的值  MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值,并产生另一个类型的值. 两者具体的语法如下:1 CAS ...

  7. Delphi调用WebService(通过SoapHeader认证)经验总结

    项目(Delphi开发)需要调用另一个系统的WebService.走了不少弯路,现记录总结一下经验.以下是WebService要求: 1.WebService概述 营销Webservice接口采用Ap ...

  8. iOS开发——UI篇Swift篇&玩转UItableView(二)高级功能

    UItableView高级功能 class UITableViewControllerAF: UIViewController, UITableViewDataSource, UITableViewD ...

  9. python time模块详解(转)

    python 的内嵌time模板翻译及说明  一.简介   time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00 ...

  10. 使用Ant命令压缩JavaScript文件

    压缩JavaScript文件可以减少代码尺寸,保护源代码,节省网络带宽,加快页面打开速度,甚至优化JS代码.Yahoo有一个压缩JS的工具叫做YUI compressor, Google也有一个工具叫 ...