Asp.net+easyui frame image before uploading picture format and preview

Upload image features Although very simple, but before uploading pictures to verify the format of the picture, and also achieve a preview, there are a lot of details to be noted, this article on the details to explain this.

HTML page


<div>
Select Picture: <input id= "Idfile" style= "width:224px" runat= "server" name= "pic" onchange= "Javascript:setimagepreview (This, Localimag,preview); "type=" File "/>
</div>
Preview
<div id= "Localimag" >
<%--Preview, default picture--%>

</div>


JS Code


<script>
Check to see if the picture is in the correct format while previewing
function Setimagepreview (obj, Localimagid, Imgobjpreview) {
var array = new Array (' GIF ', ' jpeg ', ' png ', ' jpg ', ' bmp '); File types that can be uploaded
if (Obj.value = = "") {
$.messager.alert ("Let's choose the picture to upload!");
return false;
}
else {
var filecontenttype = Obj.value.match (/^ (. *) (\.) (. {1,8}) $/) [3]; This file type is very useful
Boolean variable
var isexists = false;
Loop to determine if the picture is in the correct format
for (var i in array) {
if (filecontenttype.tolowercase () = = Array[i].tolowercase ()) {
After the picture is formatted correctly, set the size of the picture according to the browser
if (Obj.files && obj.files[0]) {
Firefox, set the IMG property directly
ImgObjPreview.style.display = ' block ';
ImgObjPreview.style.width = ' 400px ';
ImgObjPreview.style.height = ' 400px ';
Firefox 7 version can not be used above the Getasdataurl () way to get, need a way
imgobjpreview.src = window. Url.createobjecturl (Obj.files[0]);
}
else {
ie, using filters
Obj.select ();
var imgsrc = Document.selection.createRange (). text;
Initial size must be set
LocalImagId.style.width = "400px";
LocalImagId.style.height = "400px";
Image exception capture to prevent users from modifying the suffix to forge pictures
try {
LocalImagId.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (Sizingmethod=scale)";
LocalImagId.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgsrc;
}
catch (e) {
$.messager.alert ("You upload the image format is not correct, please choose again!");
return false;
}
ImgObjPreview.style.display = ' None ';
Document.selection.empty ();
}
Isexists = true;
return true;
}
}
if (isexists = = False) {
$.messager.alert ("Upload picture type is incorrect!");
return false;
}
return false;
}
}

Show pictures
function over (imgid, obj, Imgbig) {
The larger figure shows the maximum size of 4:3 size 400 300
MaxWidth = 400;
MaxHeight = 300;

Show
Obj.style.display = "";
IMGBIG.SRC = IMGID.SRC;

1, width and height are more than, to see who more than, who is more than who set the maximum value, the remaining strategy in accordance with the 2, 3
2. If the width exceeds and the height does not exceed, set the width to the maximum value
3, if the width does not exceed and high exceeds, set high to the maximum value

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;
}
}
</script>


Interface Effect

</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 ()" > OK </a>
<a href= "javascript:void (0)" class= "Easyui-linkbutton" onclick= "ClearForm ()" > Cancel </a>
</div>
<%--Display Large icon area--%>
<div id= "Divimage" style= "Display:none;left:365px;top:40px;position:absolute" >

</div>
</div>
</form>


JS Code:


Show pictures
function over (imgid, obj, Imgbig) {
The larger figure shows the maximum size of 4:3 size 400 300
MaxWidth = 400;
MaxHeight = 300;


Show
Obj.style.display = "";
IMGBIG.SRC = IMGID.SRC;


1, width and height are more than, to see who more than, who is more than who set the maximum value, the remaining strategy in accordance with the 2, 3
2. If the width exceeds and the height does not exceed, set the width to the maximum value
3, if the width does not exceed and high exceeds, set high to the maximum value


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;
}
}


Hide Picture
function out () {
document.getElementById (' Divimage '). Style.display = "None";
}

Save information
function SubmitForm () {
$.messager.confirm (' Hint ', ' Are you sure you want to add this record? ', function (r) {
if (r) {
Upload pictures First, then submit
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? "Calligraphy": "Chinese painting";
var price = document.getElementById (' price '). Value;
var height = document.getElementById ("height"). Value;
var width = document.getElementById ("width"). Value;
var idfile = document.getElementById ("Idfile"). Value;

First decide whether to upload pictures after submitting

$ (' #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") {
Empty text box
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 (' hint ', ' Congratulations, information added successfully! ', ' info ');
}
else {
$.messager.alert (' Hint ', ' Save failed, please check! ', ' info ');
}
}
});
}
});
}

Upload pictures
function UploadFile () {
var idfile = document.getElementById ("Idfile"). Value;
Decide whether to select a picture
if (Idfile = null | | idfile = = "") {
$.messager.alert (' Hint ', ' please add picture! ');
document.getElementById ("Idfile"). focus ();
document.getElementById ("Idfile"). Select ();
Return
}
var options = {
Type: "POST",
URL: ' Files.ashx ',
Success:showresponse
};
Pass the options to Ajaxform
$ (' #ff '). Ajaxsubmit (options);
}
function Showresponse () {
Alert ("Upload success!");
//}


function ClearForm () {
Empty text box
document.getElementById ("Paintingname"). Value = "";
document.getElementById ("Price"). Value = "";
document.getElementById ("height"). Value = "";
document.getElementById ("width"). Value = "";
document.getElementById ("Idfile"). Value = "";
}


code for the background general handler:

To upload a picture of the general processing program:


<span style= "FONT-SIZE:14PX;" >///<summary>
Summary description of Files
</summary>
public class Files:ihttphandler
{

public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
Picture name
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)
{
Full path
String fullfullname = file. FileName;
Get the name of a picture
String fileName = fullfullname.substring (Fullfullname.lastindexof ("\") + 1);
Save path D:\GoodCommunitySystem2.0-Replica \goodcommunitysystem\paint\img\
String path = "~/paint/img";
File. SaveAs (System.Web.HttpContext.Current.Server.MapPath (path) + "\" + fileName);
}
}
}
}

public bool IsReusable
{
Get
{
return false;
}
}
}</span>


the general handler for submitting the form:


<summary>
Summary description of 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 ()//foreground value of the message
if (Command = = "Add")
{
ADD (context);
}
}
<summary>
Add a record
</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;
}
}
}


need to introduce JS:


<%--base Style--%>
<link href= ". /.. /themes/default/easyui.css "rel=" stylesheet "/>
<%--icon Style--%>
<link href= ". /.. /themes/icon.css "rel=" stylesheet "/>
&LT;%--EASYUI-JS--JS documents have first min.js must be in front, easyui.min.js must be in the back--%>
<script src= ". /jquery.min.js "></script>
<%--easyui's js--%>
<script charset= "Utf-8" src= ". /jquery.easyui.min.js "></script>
<%--Chinese js--%>
<script src= ". /locale/easyui-lang-zh_cn.js "></script>

<%--upload picture when js--%>
<script src= "Js/jquery.form.js" ></script>


Upload the picture, need jquery.form.js js file, download address: http://plugins.jquery.com/form/

=================================================================================

Recently, there are netizens, always feel that see is not too clear, can be PAINTINGBLL and paintingentity code paste-----New Look for the hood, I personally feel that the physical layer is not necessary, the following I will paintingbll the source code glued, only for your reference.

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>
Get maximum ID
</summary>
public int GetMaxID ()
{
Return DAL. GetMaxID ();
}

<summary>
Whether the record exists
</summary>
public bool Exists (int paintingid)
{
Return DAL. Exists (Paintingid);
}

<summary>
Add a piece of data
</summary>
public bool Add (entity.paintingentity Entity)
{
Return DAL. ADD (Entity);
}

<summary>
Update a piece of data
</summary>
public bool Update (entity.paintingentity Entity)
{
Return DAL. Update (Entity);
}

<summary>
Delete a piece of data
</summary>
public bool Delete (int paintingid)
{

Return DAL. Delete (Paintingid);
}
<summary>
Delete a piece of data
</summary>
public bool DeleteList (string paintingidlist)
{
Return DAL. DeleteList (paintingidlist);
}

<summary>
Get an Object entity
</summary>
Public entity.paintingentity getentity (int paintingid)
{

Return DAL. GetEntity (Paintingid);
}

<summary>
Get an object entity, from the cache
</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>
Get a list of data
</summary>
Public DataSet getlist (String strwhere)
{
Return DAL. GetList (strwhere);
}

<summary>
Get a list of data
</summary>
Public DataSet getpaintinglist (String strwhere)
{
Return DAL. Getpaintinglist (strwhere);
}
<summary>
Get the first few lines of data
</summary>
Public DataSet getlist (int top,string strwhere,string filedorder)
{
Return DAL. GetList (Top,strwhere,filedorder);
}
<summary>
Get a list of data
</summary>
Public list<entity.paintingentity> getentitylist (String strwhere)
{
DataSet ds = dal. GetList (strwhere);
Return Datatabletolist (ds. Tables[0]);
}
<summary>
Get a list of data
</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>
Get a list of data
</summary>
Public DataSet getalllist ()
{
Return GetList ("");
}

<summary>
Paging Get Data List
</summary>
public int GetRecordCount (string strwhere)
{
Return DAL. GetRecordCount (strwhere);
}
<summary>
Paging Get Data List
</summary>
Public DataSet getlistbypage (String strwhere, string by, int startIndex, int endindex)
{
Return DAL. Getlistbypage (Strwhere, by, StartIndex, Endindex);
}
<summary>
Paging Get Data List
</summary>
Public DataSet getlist (int pagesize,int pageindex,string strwhere)
//{
Return DAL. GetList (Pagesize,pageindex,strwhere);
//}

#endregion Basicmethod
#region Extensionmethod

#endregion Extensionmethod
}
}