普通文件上传和使用 mvc 创建图像缩略图有什么区别?

嗨，我对文件上传完全感到困惑。首先，任何人都向我解释普通文件更新和为图像创建缩略图并将该路径保存在数据库中有什么区别。

我检查了正常和缩略图的路径。而且只是相同，但我不知道这两种类型的uplaod之间有什么区别？谁能解释一下我的这些差异？

我尝试了两种类型。我把这段代码粘贴在这里，任何一个都会告诉我两种类型之间的区别。

1) 使用 AJAX 的普通 Uplaod

视图

@{
ViewBag.Title = "FileUpload";
}
<head>
<title></title>
</head>
<body>
<input type="file" id="FileUpload1" />
<input type="button" id="btnUpload" value="Upload Files" />
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">       </script>
<script>
$(document).ready(function(){
$('#btnUpload').click(function () {
// Checking whether FormData is available in browser
if (window.FormData !== undefined) {
var fileUpload = $("#FileUpload1").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
// Adding one more key to FormData object
fileData.append('username', 'Manas');
$.ajax({
url: '/ImageUplaod/UploadFiles',
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: fileData,
success: function (result) {
alert(result);
},
error: function (err) {
alert(err.statusText);
}
});
} else {
alert("FormData is not supported.");
}
});
});
</script>

控制器

public ActionResult  FileUpload()
{
return View();
}
[HttpPost]  
public ActionResult UploadFiles()  
{  
// Checking no of files injected in Request object  
if (Request.Files.Count > 0)  
{  
try  
{  
//  Get all files from Request object  
HttpFileCollectionBase files = Request.Files;  
for (int i = 0; i < files.Count; i++)  
{  
//string path = AppDomain.CurrentDomain.BaseDirectory + "Uploads/";  
//string filename = Path.GetFileName(Request.Files[i].FileName);  
HttpPostedFileBase file = files[i];  
string fname;  
// Checking for Internet Explorer  
if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")  
{  
string[] testfiles = file.FileName.Split(new char[] { '\' });  
fname = testfiles[testfiles.Length - 1];  
}  
else  
{  
fname = file.FileName;  
}  
// Get the complete folder path and store the file inside it.  
fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);  
file.SaveAs(fname);
var imageupload = new imageupload();
imageupload.ImageUplaod = fname;
db.imageuploads.Add(imageupload);
db.SaveChanges();
}  
// Returns message that successfully uploaded  
return Json("File Uploaded Successfully!");  
}  
catch (Exception ex)  
{  
return Json("Error occurred. Error details: " + ex.Message);  
}  
}  
else  
{  
return Json("No files selected.");  
}  
}

2) 使用 MVC 为图像提供缩略图，并将该路径保存在数据库中

型

public class ImageUploadModels
{
[Key]  
public int ImgageID   
{  
get;  
set;  
}  
[Required]  
public string ImagePath   
{  
get;  
set;  
}  
}

控制器

public ActionResult Index()
{
return View();
}
[HttpPost]  
public ActionResult ImageUploadThumnail(ImageUploadModels image, HttpPostedFileBase file)   
{  
try {  
if (file != null)  
{  
var fileName = Path.GetFileName(file.FileName);  
var thumbName = fileName.Split('.').ElementAt(0) + "_thumb." + fileName.Split('.').ElementAt(1);  
fileName = Path.Combine(Server.MapPath("/Images"), fileName);  
thumbName = Path.Combine(Server.MapPath("/Images"), thumbName);  
image.ImagePath = fileName; //to store into database, if we use DbContext  
file.SaveAs(fileName);  
Image img = Image.FromFile(fileName);  
int imgHeight = 100;  
int imgWidth = 100;  
if (img.Width < img.Height)  
{  
//portrait image  
imgHeight = 100;  
var imgRatio = (float) imgHeight / (float) img.Height;  
imgWidth = Convert.ToInt32(img.Height * imgRatio);  
}  
else if(img.Height < img.Width)  
{  
//landscape image  
imgWidth = 100;  
var imgRatio = (float) imgWidth / (float) img.Width;  
imgHeight = Convert.ToInt32(img.Height * imgRatio);  
}  
Image thumb = img.GetThumbnailImage(imgWidth, imgHeight, () => false, IntPtr.Zero);  
thumb.Save(thumbName);  
var imageupload = new imageupload();
imageupload.ImageUplaod = thumbName;
db.imageuploads.Add(imageupload);
db.SaveChanges();
}
return View();  
} catch (Exception ex)  
{  
ViewBag.Message = ex.Message.ToString();  
return View();  
}  
}

视图

@model ImageUpload.Models.ImageUploadModels
@{
ViewBag.Title = "Index";
}
@using (Html.BeginForm("ImageUploadThumnail", "ImageUplaod", null,  FormMethod.Post, new
{
enctype = "multipart/form-data"
})) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true);
<fieldset> <legend> Image </legend> 
<div class = "editor-label" > 
@Html.LabelFor(model => model.ImagePath)
</div> 
<div class = "editor-field"> 
<input id = "ImagePath"  title = "Upload an image" type = "file" name = "file"/>
</div> 
<p> <input type = "submit" value = "Upload"/> 
</p> 
</fieldset>
}

现在我发布了两种类型的上传，我尝试了. 我想知道这两种类型之间的区别，我想知道部署项目后哪种在服务器中上传图像更好。还有任何人告诉我如何使用ajax为图像创建缩略图。在上面提到的方法中，我没有使用ajax作为缩略图。但是我需要使用 ajax 更新并保存重指甲图像的路径。我尽力解释我的问题。任何人都了解我的问题并给我解决这个问题的解决方案

提前感谢..

首先，任何人都向我解释普通文件更新与为图像创建缩略图并将该路径保存在数据库中之间的区别。

什么是缩略图？

它只是一个看起来像另一个图像但文件大小较小的图像。

在网络上使用缩略图的优势

这可以在 Web 应用程序中发挥重要作用。当您访问网页(例如此网页)时，如果页面上有图像，则需要将它们带到您的计算机，以便您的浏览器可以向您显示它们。换句话说，它们需要下载到您的计算机。考虑到这一点而开发的网站，将只包含实际图像的低质量，小尺寸图像，并在您查看页面时发送。然后，当您单击图像时，例如，如果您想更仔细地查看图像，那么浏览器将向服务器发出另一个请求并获得高质量的图像。

这种技术使初始加载(确切地说是下载)速度很快，因此如果用户只想阅读某些内容，则不会在那里设置等待所有大图像。

我不确定您是否错误地使用uploading，但上传与下载相反。当您访问某个页面时，您实际上是在下载该页面(除非您已经访问过该页面并且浏览器已将其缓存)。因此，上传是您向服务器发送内容，我不确定向服务器发送内容将如何从缩略图中受益。

我认为您可能所说的是具有缩略图图像，并且缩略图的高质量图像的路径与缩略图数据存储在数据库中。当有人请求缩略图时，您发送缩略图，然后如果他们想要更高质量的图像，您可以从数据库中获取路径并提供高质量的图像。

此技术在商业站点中大量使用。例如，当您浏览亚马逊，eBay，汽车经销商时，小图像质量低，但足以让您很好地了解产品是什么。单击它后，将检索质量更好的图像。

在其他类型的应用程序中使用缩略图的优点

网络不是唯一可以使用的地方。我开发了一个iPad应用程序，我们使用了相同的技术。但是，我们不是单击图像，而是在等待用户是否会缩放(捏合和缩放)图像。一旦用户放大，我们将获得更高质量的图像。如果他们再次放大，我们将获得更高质量的图像。我们对每张图像有 4 种不同的质量级别。

总之，使用缩略图有两个优点：

更快的负载(性能)
带宽较小的图像(对移动用户尤其重要，因为数据将花费他们 $$$)

这是一个带有缩略图的页面。这是其中一个缩略图的更好质量的图像。

相关内容

最新更新

热门标签：