牡丹江0453免费信息网站,68网页设计欣赏,手机网站设计占工程比重,wordpress 定时审核一、DEMO效果 先选择图片#xff0c;点击上传后#xff0c;即可在照片预览中看到照片。如果需要更改#xff0c;重新上传就可覆盖原图片。 二、代码 页面端#xff0c;这里有个细节#xff1a;再次上传后#xff0c;如果img的URL不变#xff0c;浏览器会从缓存中…一、DEMO效果 先选择图片点击上传后即可在照片预览中看到照片。如果需要更改重新上传就可覆盖原图片。 二、代码 页面端这里有个细节再次上传后如果img的URL不变浏览器会从缓存中读取图片这就会导致图片预览不会刷新不显示刚上传的图片。解决这个问题只需要 传一个随机字符串作为参数即可。 {Layout ~/Views/Shared/_LayoutPage1.cshtml;
}!DOCTYPE htmlhtml
headmeta nameviewport contentwidthdevice-width /title图片编辑/titlelink href~/Scripts/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css relstylesheet /link href~/Scripts/toastr/build/toastr.min.css relstylesheet /script src~/Scripts/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js/scriptscript src~/Scripts/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js/scriptscript src~/Scripts/this/customEditor_fieldTypes.js/scriptscript src~/Scripts/this/tools.js/scriptscript src~/Scripts/toastr/build/toastr.min.js/script
/head
bodydiv classrowdiv classcol-md-12ul classnav nav-tabs idmyTab stylemargin-top:20pxli classactivea href#tab_1 data-toggletab classbtn idtabone图片信息/a/li/uldiv classtab-pane fade active in idtab_1div classform-group col-md-6using (Ajax.BeginForm(, null, new AjaxOptions() { OnSuccess PostSuc, OnFailure PostFail, HttpMethod Post }, new { enctype multipart/form-data, id FormImg })){input typehidden nameEmployeeId idEmployeeIdspan classbtn btn-default fileinput-buttoninput typefile namefile1 idfile1/spanbutton classbtn btn-primary start typebutton idbtnpictureidspani classfa fa-file/inbsp;上传/span/buttonfieldsetlegend照片预览/legendimg idheadimg srcUrl.Action(ShowImage,Basic,new { ViewBag.EmployeeId}) //fieldset}/div/div/div/div
/body
/html
script typetext/javascriptvar EmployeeId ViewBag.EmployeeId;$(document).ready(function () {$(#EmployeeId).val(EmployeeId);$(#btnpictureid).bind(click, function () { SaveImg(); });})function SaveImg() {$(#FormImg).attr(data-ajax-success, OnSaveImgSuccess(data));$(#FormImg).attr(data-ajax-failure, OnSaveImgFail());$(#FormImg).attr(action, /Basic/UploadImg);$(#FormImg).submit();}function OnSaveImgSuccess(data) {if (data.result success) {toastr.success(上传成功);$(#headimg).attr({ src: /Basic/ShowImage?EmployeeId ViewBag.EmployeeId Random (Math.random()*100)1});//解决因为URL没变导致图片不刷新的问题}else {toastr.error(data.msg);}}function OnSaveImgFail(msg) {toastr.error(图片上传失败,请重试!);}
/script
三、控制器端代码 ///显示图片 public ActionResult ShowImage(long EmployeeId,int Random 999 )
{byte[] byData _IEmployeeInfo.GetEmployeeById(EmployeeId).Image;return File(byData, image/jpeg);
}///上传图片
public ActionResult UploadImg(long EmployeeId)
{string msg string.Empty;string result string.Empty;byte[] imgData null;int flag 0;if (Request.Files.Count 0){HttpPostedFileBase file Request.Files[file1];if (file.ContentLength 100 * 1024){string fileType System.IO.Path.GetExtension(file.FileName);//获取文件类型if (fileType ! null){fileType fileType.ToLower();//将文件类型转化成小写if ((.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png).Contains(fileType)){imgData new byte[file.ContentLength];//新建一个长度等于图片大小的二进制地址file.InputStream.Read(imgData, 0, file.ContentLength);//将image读取到ImageData中flag _IEmployeeInfo.UpdateImg(EmployeeId, imgData);if (flag 0){result Tips.success;}}else{msg 只支持图片格式;result Tips.fail;}}}else{msg 图片大小不能超过100KB;result Tips.fail;}}else{msg 上传图片不能为空;result Tips.fail;}return Json(new Res { result result, msg msg });
}
