开发工具与关键技术:Adobe Dreamweaver JavaScript
作者:周乐献
撰写时间:2021年1月15日
<div class="col-4 text-center mt-4">
<img src="" id="studentPicture" οndblclick="showImageSelectDialog()" style="width: 150px; height: 218px;" />
</div>
@*隐藏的文件选择框,用于弹出图片选择 accept由于筛选图片*@
<!--如果不限制图像的格式,可以写为:accept="image/*"。accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。-->
<input type="file" hidden id="studentPictureFile" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" οnchange="loadImgToImg()" />
<srcipt>
//============================图片上传========================
var imageReader = new FileReader();
regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
imageReader.onload = function (evt) {
//将选择的图片显示在对应的img中
$("#studentPicture").attr("src", evt.target.result);
}
function showImageSelectDialog() {
$("#studentPictureFile").click();
}
function loadImgToImg() {
var file = $("#studentPictureFile").get(0).files[0];
//console.log(file.type);
if (regexImageFilter.test(file.type)) {
imageReader.readAsDataURL(file);
} else {
alert("选择的不是一个有效的图片文件");
}
}
//新增保存
function SaveIncreased() {
var studentNumber = $("#IstudentNumber").val().trim();//学生编号
var studentName = $("#IstudentName").val().trim();//学生姓名
var Iclass = $("#Iclass").val();//班级
var studentSex = $("#studentSex").val().trim();//性别
var telephone = $("#telephone").val().trim();//联系电话
var studentIDCard = $("#IstudentIDCard").val().trim();//身份证号
var IstudentPicture = $("#studentPictureFile").get(0).files[0];//图片
if (studentNumber == undefined || studentNumber == "" || studentNumber == null) {
layer.alert("请输入学生编号");
return false;
}
if (studentName == undefined || studentName == "" || studentName == null) {
layer.alert("请填写学生姓名");
return false;
}
if (Iclass == undefined || Iclass == "" || Iclass == null || Iclass == 0) {
layer.alert("请选择班级");
return false;
}
if (studentSex == undefined || studentSex == "" || studentSex == null) {
layer.alert("请填写性别");
return false;
}
if (studentSex != "男" && studentSex != "女") {
layer.alert("请输入正确的性别");
return false;
}
if (telephone == undefined || telephone == "" || telephone == null) {
layer.alert("手机号码不能为空");
return false;
}
if (studentIDCard == undefined || studentIDCard == "" || studentIDCard == null) {
layer.alert("请输入身份证号");
return false;
}
if (!(idCardNo(studentIDCard))) {
layer.alert("请输入正确的身份证号");
return false;
}
//创建一个表单数据,然后把需要新增的数据添加到表单数据中.表单数据中的字段名称需要和数据库中新增的数据字段想对应.但是传递图片文件的字段需要和数据库字段不一样
var form = new FormData();
form.append("studentNumber", studentNumber);
form.append("studentName", studentName);
form.append("classID", Iclass);
form.append("studentSex", studentSex);
form.append("telephone", telephone);
form.append("studentIDCard", studentIDCard);
form.append("dbStudentPicture", IstudentPicture);
var layerIndex = layer.load();
//传递图片文件是不能使用异步提交,通常使用ajax提交参数,禁止C#处理图片文件,且提交文件不能使用get方法提交,只能使用post方法提交.因为文件的长度通常会超出get方法提交数据的长度
$.ajax({
type: "post",
url: "@Url.Content("~/Main/SaveIncreasedInfo")",
data: form,
processData: false,
contentType: false,
success: function (msg) {
layer.close(layerIndex);
if (msg.State) {
layer.alert(msg.Text, { icon: 6 });
$("#formInsertStudent input[type='reset']").click();//重置表单
$("#modInsertStudent").modal("hide");//关闭模态窗体
$("#studentUPicture").attr("src", "")
InquireStudent();
} else {
layer.alert(msg.Text, { icon: 5 });
}
}
})
}
</script>
public ActionResult SaveIncreasedInfo(S_Student dbStudent,HttpPostedFileBase dbStudentPicture)
{
ReturnJson msg = new ReturnJson();
try
{
if (!string.IsNullOrEmpty(dbStudent.studentNumber))
{
if (!string.IsNullOrEmpty(dbStudent.studentName))
{
if (!string.IsNullOrEmpty(dbStudent.studentSex) && (dbStudent.studentSex == "男" || dbStudent.studentSex == "女"))
{
if (!string.IsNullOrEmpty(dbStudent.telephone) && Regex.IsMatch(dbStudent.telephone, "^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[89])[0-9]{8}$"))
{
if (IdCardHelper.CheckIdCard(dbStudent.studentIDCard))
{
if (dbStudent.classID != 0)
{
using (TransactionScope scope = new TransactionScope())
{
int studentNumberCount = (from tbStudent in myModel.S_Student
where tbStudent.studentNumber == dbStudent.studentNumber
select tbStudent).Count();
int studentIDCardCount = (from tbStudent in myModel.S_Student
where tbStudent.studentIDCard == dbStudent.studentIDCard
select tbStudent).Count();
if (studentNumberCount==0)
{
if (studentIDCardCount == 0)
{
//判断保存图片的目录是否存在
if (!System.IO.Directory.Exists(Server.MapPath("~/Document/studentPicture")))
{
System.IO.Directory.CreateDirectory(Server.MapPath("~/Document/studentPicture"));
}
//判断是否上传了图片
if (dbStudentPicture != null && dbStudentPicture.ContentLength > 0)
{
//获取文件的扩展名
string imgExtension = System.IO.Path.GetExtension(dbStudentPicture.FileName);
//拼接要保存的文件名称
string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + "_" + Guid.NewGuid() + imgExtension;
//拼接保存文件的路径
string filePath = Server.MapPath("~/Document/studentPicture/") + fileName;
//保存上传的文件到硬盘
dbStudentPicture.SaveAs(filePath);
dbStudent.studentPicture = fileName;
}
myModel.S_Student.Add(dbStudent);
if (myModel.SaveChanges() > 0)
{
scope.Complete();
msg.State = true;
msg.Text = "新增成功";
}
else
{
msg.Text = "新增失败";
}
}
else
{
msg.Text = "已经存在和新增学生身份证号相同的学生数据!";
}
}
else
{
msg.Text = "新增的学生编号重复!";
}
}
}
else
{
msg.Text = "学生班级不能为空!";
}
}
else
{
msg.Text = "请输入正确的身份证号!";
}
}
else
{
msg.Text = "请输入正确的手机号码!";
}
}
else
{
msg.Text = "学生性别不能为空或请输入正确的学生性别!";
}
}
else
{
msg.Text = "学生姓名不能为空!";
}
}
else
{
msg.Text = "学生编号不能为空!";
}
}
catch (Exception e)
{
Console.WriteLine(e);
msg.Text = "数据异常";
}
return Json(msg, JsonRequestBehavior.AllowGet);
}