表单提交学习笔记(三)—利用Request.Files上传图片并预览

时间:2021-11-29 22:29:30

一、html页面如下

 <div id="container">
<form id="myForm">
<p class="img_P"><img id="previewPic" name="previewPic" /></p>
<p><input type="file" id="imgUpload" name="imgUpload" /></p>
<p><button id="submitBtn" type="button" value="提交">提交</button></p>
</form>
</div>

二、实现上传图片预览功能

     $(function () {
$('#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);
}
})
})

三、将图片传到后台(图片存储到固定文件夹下)

view页面的代码如下(页面需引用jquery和jquery.form.js两个文件):

         $('#submitBtn').on('click', function () {
$('#myForm').ajaxSubmit({
type: 'post',
url: '/Form/ImgSubmit',
success: function (data) {
}
})
})

Controller代码

         [HttpPost]
public ActionResult ImgSubmit()
{
if (Request.Files.Count>)
{
string extension = string.Empty;
HttpPostedFileBase file = Request.Files[] as HttpPostedFileBase;
if (file.FileName.Length > )
{
if (file.FileName.IndexOf('.') > -)
{
//原来也可以这用获取扩展名
//extension = file.FileName.Remove(0, file.FileName.LastIndexOf('.'));
string filePath = "/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);
}
}
}
}
return Content("success");
} /// <summary>
/// 当存储的文件路径不存在时,创建文件路径
/// </summary>
/// <param name="savePath">保存路径(非绝对路径)</param>
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);
}

注:在做的过程中,遇到了上传了图片,但是后台总是接收不到(Request.Files.Count总是为0),原因可能如下:

1、<form> 不能被嵌套(一个页面可以有多个form,但是不能被嵌套)

2、<form method="post" ,enctype="multipart/form-data" ></form>

3、<input type="file" id="imgUpload" name="imgUpload" /> 一定要有name属性