View:
<div id="container">
<form id="myForm" action="/Text/FromPost_1" method="post" enctype="multipart/form-data">
<p class="img_P"><img id="previewPic" name="previewPic"style="width:100px;height:100px" /></p>
<p><input type="file" id="imgUpload" name="imgUpload" onclick="read()"/></p>
<p><button id="submitBtn" type="submit" value="提交">提交</button></p>
</form>
</div>
<script>
//图片浏览
function read() {
$('#imgUpload').on('change', function () {
var file = this.files[0];
if (this.files && file) {
var reader = new FileReader();
reader.onload = function (e) {
$('#previewPic').attr('src', e.target.result);
}
reader.readAsDataURL(file);
}
})
}
</script>
Controller:
public ActionResult FromPost_1()
{
if (Request.Files.Count > 0)
{
string extension ="";
HttpPostedFileBase file = Request.Files[0] as HttpPostedFileBase;
if (file.FileName.Length > 0)
{
if (file.FileName.IndexOf('.') > -1)
{
//获取扩展名
extension =file.FileName.Substring(file.FileName.LastIndexOf('.')+1).ToLower();
if (extension=="gift"|| extension == "jpg")
{
string filePath = "/AA/Upload/";
//创建路径
CreateFilePath(filePath);
if (file.FileName.ToString() != "")
{
string absoluteSavePath = System.Web.HttpContext.Current.Server.MapPath("~" + filePath);
var pathLast = Path.Combine(absoluteSavePath, file.FileName);
file.SaveAs(pathLast);
}
}
else { return Content("Fail"); }
}
}
}
return Content("success");
}
public static void CreateFilePath(string savePath)
{
string Absolute_savePath = System.Web.HttpContext.Current.Server.MapPath("~" + savePath);
if (!Directory.Exists(Absolute_savePath))
Directory.CreateDirectory(Absolute_savePath);
}
储存图片建议存储在服务器中的物理地址中,
如果要直接将图片转化为二进制文件流保存在mysql中,那么mysql负担很重。而且解析图片是可能会出现失真现象,这样一来图片可能解析不成功或图片不清晰。
我们退一步讲可以将图片在服务端的地址存在在mysql中,这样减少loading,效率变高

这篇博客介绍了如何使用HTML和JavaScript实现图片上传前的预览,并在后端控制器中处理图片保存到服务器的逻辑。强调了将图片直接存储为二进制文件流在MySQL中的弊端,建议存储图片的物理地址以提高效率。
1万+

被折叠的 条评论
为什么被折叠?



