alvandlinux
یک شنبه 16 شهریور 1393, 13:59 عصر
می توان از handler متد AJAX برای آپلود عکس استفاده کرد، اما در این روش امکان رخ دادن خطا وجود دارد. در کد های زیر با استفاده از AJAX بدون handler یک عکس را آپلود می کنیم.
1) uploadImage.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.myButton
{
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
.myButton:hover
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
background-color: #e9e9e9;
}
.myButton:active
{
position: relative;
top: 1px;
}
.style1
{
height: 45px;
width: 242px;
}
.style2
{
width: 242px;
}
.tbl
{
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -200px;
}
</style>
<script>
function PreviewImage(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
hdnSource.value = e.target.result; //Generated DataURL
hdnFileName.value = input.value.split("\\")[2]; //uploaded file Name
document.getElementById("imgShowPreview").src = e.target.result; //Set Source for preview
}
filerdr.readAsDataURL(input.files[0]);
}
}
function UploadFile() {
$.ajax({
type: "POST",
url: "uploadImage.aspx/UploadFile", //pageName.aspx/MethodName
contentType: "application/json;charset=utf-8",
data: "{'dataURL':'" + hdnSource.value + "','fileName':'" + hdnFileName.value + "'}", // pass DataURL to code behind
dataType: "json",
success: function (data) {
alert(data.d); // Success function
},
error: function (result) {
alert(result.d); //Error function
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="hidden" id="hdnSource" value="" />
<input type="hidden" id="hdnFileName" value="" />
<div>
<table class="tbl">
<thead>
<tr>
<td class="style1">
File upload by : Nirav Prabtani
</td>
</tr>
</thead>
<tr>
<td class="style2">
<input type="file" name="filUpload" id="filUpload" onchange="PreviewImage(this)" />
</td>
</tr>
<tr>
<td class="style2">
<img id="imgShowPreview" height="250px" width="250px" />
</td>
</tr>
<tr>
<td class="style2">
<span onclick="UploadFile()" class="myButton">Save Image</span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
2) uploadImage.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
namespace uploadImage
{
public partial class uploadImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string UploadFile(string dataURL, string fileName)
{
try {
if (!Directory.Exists(HttpContext.Current.Server.MapP ath("~/image")))
{
Directory.CreateDirectory(HttpContext.Current.Serv er.MapPath("~/image"));
}
Bitmap varBmp = Base64StringToBitmap(dataURL);
Bitmap newBitmap = new Bitmap(varBmp);
varBmp.Dispose();
varBmp = null;
newBitmap.Save(System.Web.Hosting.HostingEnvironme nt.MapPath("~/image/" + Path.GetFileNameWithoutExtension(fileName) + ".Jpeg"));
return "File has been uploaded successfully..!!";
}
catch(Exception ex) {
return ex.Message.ToString();
}
}
public static Bitmap Base64StringToBitmap(string base64String)
{
Bitmap bmpReturn = null;
byte[] byteBuffer = Convert.FromBase64String(base64String.Split(',')[1].ToString());
MemoryStream memoryStream = new MemoryStream(byteBuffer);
memoryStream.Position = 0;
bmpReturn = (Bitmap)Bitmap.FromStream(memoryStream);
memoryStream.Close();
memoryStream = null;
byteBuffer = null;
return bmpReturn;
}
}
}
1) uploadImage.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.myButton
{
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
.myButton:hover
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
background-color: #e9e9e9;
}
.myButton:active
{
position: relative;
top: 1px;
}
.style1
{
height: 45px;
width: 242px;
}
.style2
{
width: 242px;
}
.tbl
{
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -200px;
}
</style>
<script>
function PreviewImage(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
hdnSource.value = e.target.result; //Generated DataURL
hdnFileName.value = input.value.split("\\")[2]; //uploaded file Name
document.getElementById("imgShowPreview").src = e.target.result; //Set Source for preview
}
filerdr.readAsDataURL(input.files[0]);
}
}
function UploadFile() {
$.ajax({
type: "POST",
url: "uploadImage.aspx/UploadFile", //pageName.aspx/MethodName
contentType: "application/json;charset=utf-8",
data: "{'dataURL':'" + hdnSource.value + "','fileName':'" + hdnFileName.value + "'}", // pass DataURL to code behind
dataType: "json",
success: function (data) {
alert(data.d); // Success function
},
error: function (result) {
alert(result.d); //Error function
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="hidden" id="hdnSource" value="" />
<input type="hidden" id="hdnFileName" value="" />
<div>
<table class="tbl">
<thead>
<tr>
<td class="style1">
File upload by : Nirav Prabtani
</td>
</tr>
</thead>
<tr>
<td class="style2">
<input type="file" name="filUpload" id="filUpload" onchange="PreviewImage(this)" />
</td>
</tr>
<tr>
<td class="style2">
<img id="imgShowPreview" height="250px" width="250px" />
</td>
</tr>
<tr>
<td class="style2">
<span onclick="UploadFile()" class="myButton">Save Image</span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
2) uploadImage.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.IO;
using System.Drawing;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
namespace uploadImage
{
public partial class uploadImage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string UploadFile(string dataURL, string fileName)
{
try {
if (!Directory.Exists(HttpContext.Current.Server.MapP ath("~/image")))
{
Directory.CreateDirectory(HttpContext.Current.Serv er.MapPath("~/image"));
}
Bitmap varBmp = Base64StringToBitmap(dataURL);
Bitmap newBitmap = new Bitmap(varBmp);
varBmp.Dispose();
varBmp = null;
newBitmap.Save(System.Web.Hosting.HostingEnvironme nt.MapPath("~/image/" + Path.GetFileNameWithoutExtension(fileName) + ".Jpeg"));
return "File has been uploaded successfully..!!";
}
catch(Exception ex) {
return ex.Message.ToString();
}
}
public static Bitmap Base64StringToBitmap(string base64String)
{
Bitmap bmpReturn = null;
byte[] byteBuffer = Convert.FromBase64String(base64String.Split(',')[1].ToString());
MemoryStream memoryStream = new MemoryStream(byteBuffer);
memoryStream.Position = 0;
bmpReturn = (Bitmap)Bitmap.FromStream(memoryStream);
memoryStream.Close();
memoryStream = null;
byteBuffer = null;
return bmpReturn;
}
}
}