基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码。

HTML的代码:

<form id="ff" runat="server" method="post">
<div id="content" style="margin-left:50px;">
<table style="width:300px;" id="uniform">
<tr>
<td>书画名称:<input id="paintingName" class="easyui-validatebox" validType:'paintingName' type="text" name="paintingName" data-options="required:true"/></td>
</tr>
<tr>
<td>书画类别:<input id="radPaint" value="国画" class="easyui-validatebox" name="type" type="radio" checked="checked" data-options="required:true" />国画
<input id="rad" name="type" class="easyui-validatebox" type="radio" data-options="required:true" />书法</td>
</tr>
<tr>
<td>书画作者:<asp:DropDownList ID="ddlist" runat="server" Width="155px"></asp:DropDownList>
</td>
</tr>
<tr>
<td>书画价格:<input id="price" class="easyui-numberbox" type="text" name="price" data-options="required:true"/>元</td>
</tr>
<tr>
<td>高  度:<input id="height" class="easyui-numberbox" type="text" name="height" data-options="required:true"/>cm</td>
</tr>
<tr>
<td>
宽  度:<input id="width" class="easyui-numberbox" type="text" name="width" data-options="required:true"/>cm
</td>
</tr>
<tr>
<td>
选择图片:<asp:FileUpload ID="idFile" Width="150px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);">
</td>
</tr>
<tr>
<td>
预  览:
<div id="localImag" style="width: 300px; height: 200px;">
<img id="preview" alt="预览图片" onclick="over(preview,divImage,imgbig);" src="../../Paint/img/default.jpg" width="300" height="200"/>
</div>
</td>
</tr>
</table>
<input type="hidden" id="test" name="test" />
<div style="width:300px; text-align:center;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">确定</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">取消</a>
</div>
<%--显示大图标的区域--%>
<div id="divImage" style="display: none;left:365px;top:40px;position: absolute">
<img id="imgbig" onclick="out();" src="" alt="大图" />
</div>
</div>
</form>

JS代码:

//显示图片
function over(imgid, obj, imgbig) {
//大图显示的最大尺寸 4比3的大小 400 300
maxwidth = 400;
maxheight = 300;
//显示
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 >= 0)
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 out() {
document.getElementById('divImage').style.display = "none";
}
//保存信息
function submitForm() {
$.messager.confirm('提示', '你确定要添加此记录吗?', function (r) {
if (r) {
//先上传图片后,再提交
upLoadFile();
var test = document.getElementById("test").value = "add";
var paintingName = document.getElementById("paintingName").value;
var artistID = document.getElementById("ddlist").value;
var type = $(":checkbox[name='type']").attr("checked") == true ? "书法" : "国画";
var price = document.getElementById("price").value;
var height = document.getElementById("height").value;
var width = document.getElementById("width").value;
var idFile = document.getElementById("idFile").value;
//先判断是否上传图片之后在提交
$('#ff').form('submit', {
url: "Painting.ashx?paintingName=" + paintingName + "&artistID=" + artistID +
"&type=" + type + "&price=" + price + "&height=" + height + "&width=" + width +
"&idFile=" + idFile + "&addID=" + addID + "&test=" + test,
dataType: "json",
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
if (result == "T") {
//清空文本框
document.getElementById("paintingName").value = "";
document.getElementById("price").value = "";
document.getElementById("height").value = "";
document.getElementById("width").value = "";
document.getElementById("idFile").value = "";
document.getElementById("preview").value = "";
$.messager.alert('提示', '恭喜您,信息添加成功!', 'info');
}
else {
$.messager.alert('提示', '保存失败,请您核对!', 'info');
}
}
});
}
});
}
//上传图片
function upLoadFile() {
var idFile = document.getElementById("idFile").value;
//判断是否选择图片
if (idFile == null || idFile == "") {
$.messager.alert('提示','请添加图片!');
document.getElementById("idFile").focus();
document.getElementById("idFile").select();
return;
}
var options = {
type: "POST",
url: 'Files.ashx',
//success: showResponse
};
// 将options传给ajaxForm
$('#ff').ajaxSubmit(options);
}
//function showResponse() {
// alert("上传成功!");
//}
function clearForm(){
//清空文本框
document.getElementById("paintingName").value = "";
document.getElementById("price").value = "";
document.getElementById("height").value = "";
document.getElementById("width").value = "";
document.getElementById("idFile").value = "";
}

后台一般处理程序的代码:

上传图片的一般处理程序:

<span style="font-size:14px;"> /// <summary>
/// Files 的摘要说明
/// </summary>
public class Files : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//图片名
HttpFileCollection files = context.Request.Files;
if (files.Count > 0)
{
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
if (file.ContentLength > 0)
{
//全路径
string FullFullName = file.FileName;
//获取图片的名称
String fileName = FullFullName.Substring(FullFullName.LastIndexOf("\\") + 1);
//保存路径D:\GoodCommunitySystem2.0 - 副本\GoodCommunitySystem\Paint\img\
string path = "~/Paint/img";
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path) + "\\" + fileName);
}
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}</span>

提交表单的一般处理程序:

/// <summary>
/// Painting 的摘要说明
/// </summary>
public class Painting : IHttpHandler
{
paintingBLL paintingbll = new paintingBLL();
Entity.paintingEntity paintingEntity = new Entity.paintingEntity();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string command = context.Request["test"].ToString();//前台传的标示值
if (command == "add")
{
Add(context);
}
}
/// <summary>
/// 添加记录
/// </summary>
/// <param name="context"></param>
public void Add(HttpContext context)
{
paintingEntity.PaintingName = context.Request.QueryString["paintingName"];
paintingEntity.PaintingStyle = context.Request.QueryString["type"];
paintingEntity.PaintingURL = context.Request.QueryString["idFile"];
paintingEntity.Price = Convert.ToInt32(context.Request["price"]);
paintingEntity.AddID = Convert.ToInt32(context.Request["addID"]);
paintingEntity.ArtistID = Convert.ToInt32(context.Request["artistID"]);
paintingEntity.Height = Convert.ToInt32(context.Request.QueryString["height"]);
paintingEntity.Width = Convert.ToInt32(context.Request.QueryString["width"]);
try
{
if (paintingbll.Add(paintingEntity))
{
context.Response.Write("T");
}
else
{
context.Response.Write("F");
}
}
catch (Exception ex)
{
throw ex;
}
}
public bool IsReusable
{
get
{
return false;
}
}
}

需要引入的js:

<%--基础样式--%>
<link href="../../themes/default/easyui.css" rel="stylesheet" />
<%--图标样式--%>
<link href="../../themes/icon.css" rel="stylesheet" />
<%--easyui-js--js的文件有先有后min.js必须在前,easyui.min.js必须在后--%>
<script src="../jquery.min.js"></script>
<%--easyui 的js--%>
<script charset="utf-8" src="../jquery.easyui.min.js"></script>
<%--中文js--%>
<script src="../locale/easyui-lang-zh_CN.js"></script>
<%--上传图片时js--%>
<script src="js/jquery.form.js"></script>

上传图片时,需要jquery.form.js的js文件,下载地址:http://download.csdn.net/detail/jiuqiyuliang/6919517

上传图片,并提交表单就是这么简单,一些js代码+一般处理程序,相信你一看就会。后面的博客我会更新一些关于easyui-datagrid的相关博客,敬请期待。

最近有网友,总觉得看的还不是太明白,能不能将paintingBLL和paintingEntity代码贴一下-----新人求罩,我个人觉得实体层就没有必要了,下面我就将paintingBLL的源码粘一下,仅供大家参考。

using System;
using System.Data;
using System.Collections.Generic;
using Common;
using Entity;
using DALFactory;
using IDAL;
namespace BLL
{
/// <summary>
/// paintingBLL
/// </summary>
public partial class paintingBLL
{
private readonly IpaintingDAL dal=DataAccess.CreatepaintingDAL();
public paintingBLL()
{}
#region BasicMethod
/// <summary>
/// 得到最大ID
/// </summary>
public int GetMaxId()
{
return dal.GetMaxId();
}
/// <summary>
/// 是否存在该记录
/// </summary>
public bool Exists(int PaintingID)
{
return dal.Exists(PaintingID);
}
/// <summary>
/// 增加一条数据
/// </summary>
public bool Add(Entity.paintingEntity Entity)
{
return dal.Add(Entity);
}
/// <summary>
/// 更新一条数据
/// </summary>
public bool Update(Entity.paintingEntity Entity)
{
return dal.Update(Entity);
}
/// <summary>
/// 删除一条数据
/// </summary>
public bool Delete(int PaintingID)
{
return dal.Delete(PaintingID);
}
/// <summary>
/// 删除一条数据
/// </summary>
public bool DeleteList(string PaintingIDlist )
{
return dal.DeleteList(PaintingIDlist );
}
/// <summary>
/// 得到一个对象实体
/// </summary>
public Entity.paintingEntity GetEntity(int PaintingID)
{
return dal.GetEntity(PaintingID);
}
/// <summary>
/// 得到一个对象实体,从缓存中
/// </summary>
public Entity.paintingEntity GetEntityByCache(int PaintingID)
{
string CacheKey = "paintingEntityEntity-" + PaintingID;
object objEntity = Common.DataCache.GetCache(CacheKey);
if (objEntity == null)
{
try
{
objEntity = dal.GetEntity(PaintingID);
if (objEntity != null)
{
int EntityCache = Common.ConfigHelper.GetConfigInt("EntityCache");
Common.DataCache.SetCache(CacheKey, objEntity, DateTime.Now.AddMinutes(EntityCache), TimeSpan.Zero);
}
}
catch{}
}
return (Entity.paintingEntity)objEntity;
}
/// <summary>
/// 获得数据列表
/// </summary>
public DataSet GetList(string strWhere)
{
return dal.GetList(strWhere);
}
/// <summary>
/// 获得数据列表
/// </summary>
public DataSet GetPaintingList(string strWhere)
{
return dal.GetPaintingList(strWhere);
}
/// <summary>
/// 获得前几行数据
/// </summary>
public DataSet GetList(int Top,string strWhere,string filedOrder)
{
return dal.GetList(Top,strWhere,filedOrder);
}
/// <summary>
/// 获得数据列表
/// </summary>
public List<Entity.paintingEntity> GetEntityList(string strWhere)
{
DataSet ds = dal.GetList(strWhere);
return DataTableToList(ds.Tables[0]);
}
/// <summary>
/// 获得数据列表
/// </summary>
public List<Entity.paintingEntity> DataTableToList(DataTable dt)
{
List<Entity.paintingEntity> EntityList = new List<Entity.paintingEntity>();
int rowsCount = dt.Rows.Count;
if (rowsCount > 0)
{
Entity.paintingEntity Entity;
for (int n = 0; n < rowsCount; n++)
{
Entity = dal.DataRowToEntity(dt.Rows[n]);
if (Entity != null)
{
EntityList.Add(Entity);
}
}
}
return EntityList;
}
/// <summary>
/// 获得数据列表
/// </summary>
public DataSet GetAllList()
{
return GetList("");
}
/// <summary>
/// 分页获取数据列表
/// </summary>
public int GetRecordCount(string strWhere)
{
return dal.GetRecordCount(strWhere);
}
/// <summary>
/// 分页获取数据列表
/// </summary>
public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
{
return dal.GetListByPage( strWhere, orderby, startIndex, endIndex);
}
/// <summary>
/// 分页获取数据列表
/// </summary>
//public DataSet GetList(int PageSize,int PageIndex,string strWhere)
//{
//return dal.GetList(PageSize,PageIndex,strWhere);
//}
#endregion BasicMethod
#region ExtensionMethod
#endregion ExtensionMethod
}
}

以上所述是小编给大家介绍的基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-06-27

ASP.NET MVC使用EasyUI的datagrid多选提交保存教程

需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(function() { //searchbox $('#selectgoods-keywords').searchbox({ searcher: function(val, name) { searchInfo

基于ASP.NET+easyUI框架实现图片上传功能(表单)

基于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" ty

EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Manage_Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

最近项目中需要跨域调用其他项目的数据,其他项目也是使用的EasyUI的datagrid组件,开始以为直接在datagrid的url属性定义为其他项目的url地址即可,可是测试下发现的确是返回了json数据但是json数据提示"invalid label" 错误,网上搜索了下错误解决办法,参考 "JavaScript处理Json的invalid label错误解决办法"的方法利用datagrid的loadData方法加载并转换了json还是提示上述错误,感觉原因不在格

ASP.NET MVC+EF框架+EasyUI实现权限管系列

前言:本文开始我们便一步一步的来实现这个权限系统的初步设计-框架搭建,首先我要说的是我们需要开发工具Visual Studio 2012或者10也行,其次是我们要有SQL Server数据库,如果是Visual Studio 2010的话,你还要安装MVC4的开发文件,这个是吗?我不记得了,谁可以回答我一下的,我一直用2012,都是集成好的,所以不太清楚.因为这篇博客比较简单,只是建立一个简单的架构,所以我顺便进行一下MVC的知识补充,后面我也会这样穿插着介绍项目中遇到的技术,下面开始今天之旅.

ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法

如图: 上图的右边框不见了,使用 web开发工具调试,发现是内容器过大.于是想到了是jquery-easyui 对界面的"渲染"不正确引起. 起初以为是因为加了 处理重复的代码引起,但是去掉后总是依旧: 进而考虑到界面"渲染"的前后关系,于是尝试对代码片段进行延迟执行,问题解决.原问题脚本: 复制代码 代码如下: <script type="text/javascript"> if (window.__yltlClientScriptRegistKey == undefin

利用ASP.NET MVC+EasyUI+SqlServer搭建企业开发框架

我们要搭建的框架是企业级开发框架,适用用企业管理信息系统的开发,如:OA.HR等 1.框架名称:sampleFrame. 2.搭建原则:最少知识原则. 3.先定义一个简单的编码规范:除类名和接口名外,其余首字母小写. 4.准备开发环境:vs2010及以上(mvc4).sqlserver.jquery2.0和easyui1.4.5 首先来看一下列表页面的效果图: 我们期望简洁带前台代码,如下: <table id="dataGrid" class="easyui-data

Asp.net配合easyui实现返回json数据实例

本文实例讲述了Asp.net配合easyui实现返回json数据的实现方法.分享给大家供大家参考.具体如下: 最近想用asp.net配合easyui开发一个小框架,然后再用到easyui的combobox的时候出现了一个问题,总所周知,easyui的文档上给出的combobox的格式是 复制代码 代码如下: <input class="easyui-combobox"               name="language"              dat

jquery的ajax异步请求接收返回json数据实例

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

thinkPHP5实现的查询数据库并返回json数据实例

本文实例讲述了thinkPHP5实现的查询数据库并返回json数据.分享给大家供大家参考,具体如下: TP5 实现查询数据库返回json数据(返回json数据函数实例) 返回结果: 复制代码 代码如下: {"code":0,"msg":"\u6570\u636e\u8fd4\u56de\u6210\u529f","count":1000,"data":[{"id":617,"t

Jquery通过ajax请求NodeJS返回json数据实例

最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便. 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据. 3.通信数据格式灵活,可以是xml.json.binary等,数据适合任何平台. 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等.

php json_encode()函数返回json数据实例代码

json_encode()函数用法. echo json_encode(array('a'=>'bbbb','c'=>'ddddd'); 这样就会生成一个标准的json格式的数据 代码如下 <?php //需要执行的SQL语句 //单条 $sql="select id,name from tbl_user where id=1"; //多条数据 //$sql="select id,name from tbl_user"; //调用conn.php文

jQuery调用WebService返回JSON数据及参数设置注意问题

.NET Framework 3.5的发布解决了WebService调用中json问题,本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出现问题的原因 jQuery调用WebService网上的介绍也比较多,最近的项目中我也用到不少,一直都很少用.NET Ajax,比较钟情于jQuery调用请求WebService有几种方法,这主要说一下POST与

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

ajax调用返回php接口返回json数据的方法(必看篇)

php代码如下: <?php header('Content-Type: application/json'); header('Content-Type: text/html;charset=utf-8'); $email = $_GET['email']; $user = []; $conn = @mysql_connect("localhost","Test","123456") or die("Failed in conn

php返回json数据函数实例

本文实例讲述了php返回json数据函数的用法,分享给大家供大家参考.具体方法如下: json_encode()函数用法: echo json_encode(array('a'=>'bbbb','c'=>'ddddd'); 这样就会生成一个标准的json格式的数据 <?php //需要执行的SQL语句 //单条 $sql="select id,name from tbl_user where id=1"; //多条数据 //$sql="select id,n

php写app接口并返回json数据的实例(分享)

第一步:conn.PHP文件,用于连接数据库并定义接口格式,代码如下: <?php header("charset=utf-8"); $servername="localhost"; $username="root"; $password="root"; $dbname="test"; $conn = mysql_connect($servername,$username,$password); if