今回は、ajax を使用して画像の サムネイルをプレビュー、アップロード、および表示する方法を説明します。一見。 この機能を実装するには、画像をアップロードするときにプレビューすることができます。他のテキストもあるので、画像をアップロードするだけではなく、他のテキストと一緒に保存します。 ; 同時に、画像のサムネイルも生成されます。複数の画像をアップロードしたい場合は、テキストパラメータを渡すだけです。
ネットの情報を参考に自分で書きました。新たにページを追加する必要はなく、1ページだけで大丈夫です。
JS コード: //ajax保存数据，后台方法里实现此方法
function SaveData() {
filename = document.getElementById("idFile").value;
result =test_test_aspx.SaveData(filename).value;
if (result) {
alert("保存成功！");
}
return false;
}
//实现预览功能
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;
}
}
}
//当idFile内容改变时
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;
}
<p class="cbs"> <p class="l"><label>图片:</label></p> <p> <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> </p> </p> <p class="cbs"> <p class="l"><label>预览:</label></p> <p> <img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //实现预览 <img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/> //加这个主要是为了实现查看时显示图片，因为上面的（idImg）加上runat="server" 报错，如有好的方法可以留言 </p> </p>
以下は 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);
//获得文件扩展名
string fileNameExt = file.Extension;
//验证合法的文件
if (CheckFileExt(fileNameExt))
{
//生成将要保存的随机文件名
string fileName = GetFileName() + fileNameExt;
//检查保存的路径 是否有/结尾
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);
//检查是否有该路径 没有就创建
if (!Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
//将要保存的完整文件名
string toFile = toFileFullPath + fileName;
///创建WebClient实例
WebClient myWebClient = new WebClient();
//设定windows网络安全认证
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;
}
//判断缩略图在当前文件夹下是否同名称文件存在
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;
}
//缩略图保存的绝对路径
string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile;
//新建一个图板,以最小等比例压缩大小绘制原图
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
);
}
//新建一个图板,以缩略图大小绘制中间图
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
{
//出错则删除
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;
}
//生成随机数文件名
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();
}
推奨読書:
ajaxを使用してフォームを送信し、ファイルアップロードを実装する方法Ajaxがjson形式のデータをバックグラウンドに送信するときにエラーに対処する方法以上がAjax を使用して画像をプレビューおよびアップロードし、サムネイルを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
