要實(shí)現(xiàn)功能，上傳圖片時(shí)可以預(yù)覽，因還有別的文字，所以并不只上傳圖片，實(shí)現(xiàn)與別的文字一起保存，當(dāng)然上來(lái)先上傳圖片，然后把路徑和別的文字一起寫(xiě)入數(shù)據(jù)庫(kù)；同時(shí)為 圖片生成縮略圖，現(xiàn)只寫(xiě)上傳圖片方法，文字在ajax里直接傳參數(shù)就可以了，若要上傳多圖，修改一下就可以了。
借鑒了網(wǎng)上資料，自己寫(xiě)了一下，并不需要再新加頁(yè)面，只在一個(gè)頁(yè)面里就OK啦。
JS代碼：
//ajax保存數(shù)據(jù)，后臺(tái)方法里實(shí)現(xiàn)此方法
function SaveData() {
filename = document.getElementById("idFile").value;
result =test_test_aspx.SaveData(filename).value;
if (result) {
alert("保存成功！");
}
return false;
}
//實(shí)現(xiàn)預(yù)覽功能
function DrawImage(ImgD) {
var preW = 118;
var preH = 118;
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 image.height > 0) {
flag = true;
if (image.width / image.height >= preW/ preH) {
if (image.width > preW) {
ImgD.width = preW;
ImgD.height = (image.height * preW) / image.width;
}
else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "x" + image.height;
}
else {
if (image.height > preH) {
ImgD.height = preH;
ImgD.width = (image.width * preH) / image.height;
}
else {
ImgD.width = image.width;
ImgD.height = image.height;
}
ImgD.alt = image.width + "x" + image.height;
}
}
}
//當(dāng)idFile內(nèi)容改變時(shí)
function FileChange(Value) {
flag = false;
document.getElementById("showImg").style.display = "none";
document.getElementById("idImg").width = 10;
document.getElementById("idImg").height = 10;
document.getElementById("idImg").alt = "";
document.getElementById("idImg").src = Value;
}
以下為前臺(tái)代碼：
div class="cbs">
div class="l">label>圖片:/label>/div>
div>
input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" />
/div>
/div>
div class="cbs">
div class="l">label>預(yù)覽:/label>/div>
div>
img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //實(shí)現(xiàn)預(yù)覽
img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/> //加這個(gè)主要是為了實(shí)現(xiàn)查看時(shí)顯示圖片，因?yàn)樯厦娴模╥dImg）加上runat="server" 報(bào)錯(cuò)，如有好的方法可以留言
/div>
/div>
以下為AJAX方法：
[Ajax.AjaxMethod()]
public bool SaveData(string fileNamePath)
{
string serverFileName = "";
string sThumbFile = "";
string sSavePath = "~/Files/";
int intThumbWidth = 118;
int intThumbHeight = 118;
string sThumbExtension = "thumb_";
try
{
//獲取要保存的文件信息
FileInfo file = new FileInfo(fileNamePath);
//獲得文件擴(kuò)展名
string fileNameExt = file.Extension;
//驗(yàn)證合法的文件
if (CheckFileExt(fileNameExt))
{
//生成將要保存的隨機(jī)文件名
string fileName = GetFileName() + fileNameExt;
//檢查保存的路徑 是否有/結(jié)尾
if (sSavePath.EndsWith("/") == false) sSavePath = sSavePath + "/";
//按日期歸類保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
sSavePath += datePath;
}
//獲得要保存的文件路徑
serverFileName = sSavePath + fileName;
//物理完整路徑
string toFileFullPath = HttpContext.Current.Server.MapPath(sSavePath);
//檢查是否有該路徑 沒(méi)有就創(chuàng)建
if (!Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
//將要保存的完整文件名
string toFile = toFileFullPath + fileName;
///創(chuàng)建WebClient實(shí)例
WebClient myWebClient = new WebClient();
//設(shè)定windows網(wǎng)絡(luò)安全認(rèn)證
myWebClient.Credentials = CredentialCache.DefaultCredentials;
//要上傳的文件
FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read);
//FileStream fs = OpenFile();
BinaryReader r = new BinaryReader(fs);
//使用UploadFile方法可以用下面的格式
//myWebClient.UploadFile(toFile, "PUT",fileNamePath);
byte[] postArray = r.ReadBytes((int)fs.Length);
Stream postStream = myWebClient.OpenWrite(toFile, "PUT");
if (postStream.CanWrite)
{
postStream.Write(postArray, 0, postArray.Length);
}
postStream.Close();
//以上為原圖
try
{
//原圖加載
using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(serverFileName)))
{
//原圖寬度和高度
int width = sourceImage.Width;
int height = sourceImage.Height;
int smallWidth;
int smallHeight;
//獲取第一張繪制圖的大小,(比較 原圖的寬/縮略圖的寬 和 原圖的高/縮略圖的高)
if (((decimal)width) / height = ((decimal)intThumbWidth) / intThumbHeight)
{
smallWidth = intThumbWidth;
smallHeight = intThumbWidth * height / width;
}
else
{
smallWidth = intThumbHeight * width / height;
smallHeight = intThumbHeight;
}
//判斷縮略圖在當(dāng)前文件夾下是否同名稱文件存在
int file_append = 0;
sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + fileNameExt;
while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile)))
{
file_append++;
sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) +
file_append.ToString() + fileNameExt;
}
//縮略圖保存的絕對(duì)路徑
string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile;
//新建一個(gè)圖板,以最小等比例壓縮大小繪制原圖
using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight))
{
//繪制中間圖
using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap))
{
//高清,平滑
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.Clear(Color.Black);
g.DrawImage(
sourceImage,
new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight),
new System.Drawing.Rectangle(0, 0, width, height),
System.Drawing.GraphicsUnit.Pixel
);
}
//新建一個(gè)圖板,以縮略圖大小繪制中間圖
using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight))
{
//繪制縮略圖
using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1))
{
//高清,平滑
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.Clear(Color.Black);
int lwidth = (smallWidth - intThumbWidth) / 2;
int bheight = (smallHeight - intThumbHeight) / 2;
g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth,intThumbHeight, GraphicsUnit.Pixel);
g.Dispose();
bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg);
return true;
}
}
}
}
}
catch
{
//出錯(cuò)則刪除
System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(serverFileName));
return false;
}
}
else
{
return false;
}
}
catch (Exception e)
{
return false;
}
}
/// summary>
/// 檢查是否為合法的上傳文件
/// /summary>
/// param name="_fileExt">/param>
/// returns>/returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };
for (int i = 0; i allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;
}
//生成隨機(jī)數(shù)文件名
public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));
serial.Append(rd.Next(0, 999999).ToString());
return serial.ToString();
}
以上就是小編為大家?guī)?lái)的AJAX實(shí)現(xiàn)圖片預(yù)覽與上傳及生成縮略圖的方法的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~
標(biāo)簽：洛陽(yáng) 鄭州 遼源 林芝 內(nèi)蒙古 海南 舟山 邢臺(tái)
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《AJAX實(shí)現(xiàn)圖片預(yù)覽與上傳及生成縮略圖的方法》，本文關(guān)鍵詞 AJAX,實(shí)現(xiàn),圖片,預(yù)覽,與,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
