新增图片操作
Posted 是小叶的呢.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新增图片操作相关的知识，希望对你有一定的参考价值。
html部分如下：
<div class="modal" tabindex="-1" role="dialog" id="addModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">新增信息</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 文件选择控件-->
<input type="file" id="upImage" hidden accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" />
<form id="myform" method="post" action="">
<input type="text" hidden id="studentID" name="studentID"/>
<!-- 图片 -->
<div class="col-12 col-lg-12 row justify-content-center">
<img id="studentPicture" src="" class="img-thumbnail" alt="双击选择图片" style="height:168px;">
</div>
<!-- 表单控件 -->
<div class="form-group form-row row">
<label class="col-form-label col-2 text-center">所属学院</label>
<select class="form-control col-9" name="collegeID" id="college" onchange="bindFormSpecialtyAndClass()">
<option value="0">--请选择--</option>
</select>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">所属专业</label>
<select class="form-control col-9" name="zhuanyeID" id="zhuanye" onchange="bindFormClass()">
<option value="0">--请选择--</option>
</select>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">所属年级</label>
<select class="form-control col-9" name="gradeID" id="grade" onchange="bindFormClass()">
<option value="0">--请选择--</option>
</select>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">所属班级</label>
<select class="form-control col-9" name="classID" id="Class">
<option value="0">--请选择--</option>
</select>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">学生姓名</label>
<input class="form-control col-9" type="text" name="studentName" id="studentname" />
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">学生性别</label>
<select class="form-control col-9" name="studentSex" id="sex">
<option value="0">--请选择--</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">身份证号</label>
<input class="form-control col-9" type="text" name="idCard" id="card" />
</div>
<div class="form-group form-row">
<label class="col-form-label col-2 text-center">学号</label>
<input class="form-control col-9" type="text" name="studentCode" id="code" />
</div>
</form>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary" onclick="saveForm()">保存</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
javascript部分如下：
$("#studentPicture").dblclick(function () {
$("#upImage").click();
});
//图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp
var regexImageFilter = /^(?:image\\/bmp|image\\/gif|image\\/jpg|image\\/jpeg|image\\/png)$/i;
var fileReader = new FileReader();
$("#upImage").change(function () {
//获取出文件选择器中的第一个文件
var files = this.files[0];
console.log(files);
//判断文件选择类型
if (regexImageFilter.test(files.type)) {
//读取文件转换成URL
fileReader.readAsDataURL(files);
} else {
layer.alert("请选择图片");
}
});
//该事件在读取操作完成时触发
fileReader.onload = function (event) {
//console.log(event.target.result);
$("#studentPicture").attr("src", event.target.result);
}
//打开新增的模态窗口
function openInsertModal() {
$("#upImage").val(null);
$("#studentPicture").removeAttr("src");
//重置表单
$("#myform")[0].reset();
//手动修改studentID
$("#studentID").val(0);
//修改标题
$("#modalTitle").text("新增学生");
//显示模态框
$("#addModal").modal("show");
}
//新增学生信息
function saveForm() {
//serialize 序列表格内容为字符串。
//获取参数
var formDataArr = $("#myform").serializeArray();
console.log(formDataArr);
//文件上传表单
var upFormData = new FormData();
//把参数Array转为Obj
var formData = {};
for (var key in formDataArr){
//key 0 1 2
formData[formDataArr[key].name] = formDataArr[key].value;
upFormData.append(formDataArr[key].name, formDataArr[key].value);
}
//console.log(formData);
//console.log(upFormData);
//把文件数据添加到
upFormData.append("upImage", $("#upImage").get(0).files[0]);
//数据验证
if (formData.collegeID == undefined || formData.collegeID == "" || formData.collegeID <= 0) {
layer.alert("请选择学院");
return;
}
if (formData.gradeID == undefined || formData.gradeID == "" || formData.gradeID <= 0) {
layer.alert("请选择年级");
return;
}
if (formData.zhuanyeID == undefined || formData.zhuanyeID == "" || formData.zhuanyeID <= 0) {
layer.alert("请选择专业");
return;
}
if (formData.classID == undefined || formData.classID == "" || formData.classID <= 0) {
layer.alert("请选择班级");
return;
}
if (formData.studentName == undefined || formData.studentName == "") {
layer.alert("请输入学生姓名");
return;
}
if (formData.idCard == undefined || formData.idCard == "" || idCardNo(formData.idCard) == false) {
layer.alert("请输入正确学生身份证号");
return;
}
if (formData.studentCode == undefined || formData.studentCode == "") {
layer.alert("请输入学生学号");
return;
}
var url = "@Url.Content("~/BaseInfor/Student/addInfor")";
if (formData.studentID != undefined && formData.studentID != "" && formData.studentID > 0) {
url = "@Url.Content("~/BaseInfor/Student/saveamendInfor")";
}
//表单提交
var layerIndex = layer.load();
$.ajax({
type: 'post',
url: url,
contentType: false,//让Ajax不指定数据类型
processData: false,//让Ajax不对数据进行处理
data: upFormData,
success: function (jsonMsg) {
layer.close(layerIndex);
layer.alert(jsonMsg.Text);
if (jsonMsg.State) {
tabStudentSearch();//刷新表格
$("#addModal").modal("hide");//关闭模态框
}
}
})
}
控制器部分如下：
public ActionResult addInfor(Studentchart student, HttpPostedFileBase upImage)
{
ReturnJson msg = new ReturnJson();
if(student.collegeID > 0)
{
if (student.gradeID > 0)
{
if (student.classID > 0)
{
VSCode插件开发全攻略代码片段设置自定义欢迎页
[新增ST-001片段]全程字幕-20套UML+Enterprise Architect建模示范视频