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 에 관 한 블 로 그 를 업데이트 할 것 이 니 기대 하 세 요.
최근 네티즌 들 은 아직 잘 모 르 겠 어 요.painting BLL 과 painting Entity 코드 를 붙 여 주 시 겠 어 요?-신인 마스크,저 는 개인 적 으로 실체 층 이 필요 없다 고 생각 합 니 다.다음은 painting BLL 의 소스 코드 를 붙 여 드 리 겠 습 니 다.참고 하 시기 바 랍 니 다.

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 제출 사진)을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!