UploadFile图片上传案例

实现效果

点击上传图片按钮弹出一个窗口，选择图片路径，点击上传按钮上传成功

HTML

<div id="WGHSupervisorInfoImage" class="easyui-window" modal="true" title="展示图片" closed="true" style="width:690px;height:400px;padding:5px;background: #fff;"><div class="easyui-layout" fit="true"><div region="north" border="false"><label>图片展示</label></div><div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;"><div style="background:#efefef;padding:5px;width:650px;"><a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-add" onclick="open_WGHSupervisorInfoImageWindow()">上传图片</a><a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-remove" onclick="del_WGHSupervisorInfo_image()">删除图片</a></div><div id="WGHSupervisorInfoImage_Panel" class="easyui-panel" style="width:663px; height:310px; margin-top:5px;"><ul></ul></div></div>
</div>
</div>
<div id="WGHSupervisorInfoImageWindow" class = "easyui-window" title = "添加图片" closed="true" modal="true" iconCls="icon-save" style="width:400px;height:300px;padding:5px;background: #fff;"><div class = "easyui-layout" fit="true"><div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;"><form id="formFile"><table width="350px;"><tr><td><input type="file" id="file_Img" name="file_Img" style="width: 300px" /></td></tr><tr style="line-height:30px;"><td valign="middle"><a href="#" onclick="UploadFile()">上传</a>|<a href="#" onclick="CloseUploadFile()">取消上传</a></td></tr></table></form></div></div>
</div>
//点击放大图片
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999999;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div>
</div>

JS

//点击图片function GetSelectSupervisorInfoImage(obj) {$('#WGHSupervisorInfoImage ul li').css('background-color', '');$(obj).css('background-color', 'Gray');selectImg = obj;if ($(selectImg).find('img').length > 0) {lookImg("#outerdiv", "#innerdiv", "#bigimg", $(selectImg).find('img')[0].src);}}//放大图片function lookImg(outerdiv, innerdiv, bigimg, src) {$(bigimg).attr("src", src); //设置#bigimg元素的src属性  /*获取当前点击图片的真实大小，并显示弹出层及大图*/$("<img/>").attr("src", src).load(function () {var windowW = $(window).width(); //获取当前窗口宽度  var windowH = $(window).height(); //获取当前窗口高度  var realWidth = this.width; //获取图片真实宽度  var realHeight = this.height; //获取图片真实高度  var imgWidth, imgHeight;var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  if (realHeight > windowH * scale) {//判断图片高度  imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放  imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度  if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度  imgWidth = windowW * scale; //再对宽度进行缩放  }} else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度  imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放  imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度  } else {//如果图片真实高度和宽度都符合要求，高宽不变  imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放  var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距  var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距  $(innerdiv).css({ "top": h, "left": w }); //设置#innerdiv的top和left属性  $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg  });$(outerdiv).click(function () {//再次点击淡出消失弹出层  $(this).fadeOut("fast");});}//删除图片function del_WGHSupervisorInfo_image() {if ($(selectImg).find('img').length > 0) {var Path;if ($(selectImg).find('img')[0].nameProp == undefined) {var List = $(selectImg).find('img')[0].src.split('/');Path = List[List.length - 1];}else {Path = $(selectImg).find('img')[0].nameProp;}$.post("/Supervisor/DelSupervisorInfoImage",{ SupervisorInfoId: $('#WGHSupervisorInfoDataPage').datagrid('getSelections')[0].Id, Path: Path },function (data, textStatus) {if (textStatus == "success") {$(selectImg).remove();$('#WGHSupervisorInfoDataPage').datagrid('reload');selectImg = null;}},"json");}}//读取图片，图片可以是多张以列表的形式显示function GetPathList(obj) {$.post("/Supervisor/GetPathList",{Id: obj},function (data, textStatus) {if (textStatus == "success") {if (data.length > 0) {$('#WGHSupervisorInfoImage_Panel ul').empty();for (var i = 0; i < data.length; i++) {var aa = "img" + (i + 1);var imgArry = data[i].img_path.split('/');$('#WGHSupervisorInfoImage ul').append("<li οnclick=\"GetSelectSupervisorInfoImage(this)\" ><img src='" + data[i].img_path + "' /></li>");}}}},"json");}//保存图片function UploadFile() {var Id = $("#WGHSupervisorInfoDataPage").datagrid('getSelections')[0].Id;$.ajaxFileUpload({url: '/Supervisor/UpdateLoad', //用于文件上传的服务器端请求地址secureuri: false, //一般设置为false，是否安全上传fileElementId: 'file_Img', //文件上传控件的id属性dataType: 'json', //返回值类型 一般设置为json 期望服务器传回的数据类型success: function (datas, status)  //服务器成功响应处理函数{if (typeof (datas.error) != 'undefined') {if (datas.error != "") {if (datas.error == "1") {$.messager.alert("提示", "您上传的附件不符合格式");}else {$.post("/Supervisor/SaveUploadFile",{Id: Id, path: datas.ImgPath, FileName: datas.oldFileName},function (data, textStatus) {if (textStatus == "success") {if (data == "1") {GetPathList(Id);$('#WGHSupervisorInfoImageWindow').window('close');$.messager.alert('成功', '附件上传成功!');$('#WGHSupervisorInfoDataPage').datagrid('reload');}else {$.messager.alert("失败", "附件上传失败！");}}},'json');}}}}, error: function (datas, status, e)//服务器响应失败处理函数{$.messager.alert('提示', e, "info");}})}//关闭图片窗口function CloseUploadFile() {$('#formFile').form('clear');$('#WGHSupervisorInfoImageWindow').window('close');}

后台方法

//图片上传的路径public ActionResult UpdateLoad(){string error = "";//返回结果string msg = "";//状态string url = "";//保存的物理路径 //上传附件string newFileName = System.Guid.NewGuid().ToString();  //新的附件名称string ExtensionName = Path.GetExtension(Request.Files[0].FileName).ToLower();//扩展名小写string filename = Path.GetFileNameWithoutExtension(Request.Files[0].FileName);string[] filespli = filename.Split('/');string oldFileName = filespli[filespli.Length - 1];//Path.GetFileNameWithoutExtension(Request.Files[0].FileName); //获取文件名称if (ExtensionName != ".jpg" && ExtensionName != ".png" && ExtensionName != ".gif" && ExtensionName != ".bmp"){error = "1";msg = "上传失败,不允许上传以" + ExtensionName + "结尾的附件";}else{string ImgPath = Server.MapPath("/UploadImage/Wholesale/" + newFileName + ExtensionName);Request.Files[0].SaveAs(ImgPath);//上传url = "/UploadImage/Wholesale/" + newFileName + ExtensionName;error = "0";}string res = "{error:'" + error + "',msg:'" + msg + "',ImgPath:'" + url + "',oldFileName:'" + oldFileName + "'}";return Content(res);}

其他的后台方法自己写吧！！！！！！！！！

UploadFile图片上传案例相关推荐

使用ueditor实现多图片上传案例
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用.百度UEditor的推出 ...
使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
h5 实现图片上传案例
如何在h5 中实现图片上传 ? (单图片上传) 先写一个按钮 ,通过点击按钮触发文件上传的onclick 事件 <div class="btn" onclick=" ...
asp.net多图片上传案例_会计小明的故事-成本核算案例篇
因涉及成本核算案例篇,所需要的图表比较多,但是知乎不同于微信可以直接将文档图表复制过来,知乎专栏文章,所有图表必须先截图,然后以图片形式展示.但是成本核算案例图表实在是太多,一一截图,一则影响整体观感 ...
使用ueditor实现多图片上传案例——截取字符串层Util（SubString_text）
/** * @Title: ConfigManager.java * @Package org.util * @Description: TODO该方法的主要作用: * @author A18ccms ...
使用ueditor实现多图片上传案例——实体类（Shopping.java）
/** * @Title: Shopping.java * @Package org.entity * @Description: TODO该方法的主要作用: * @author A18ccms A1 ...
使用ueditor实现多图片上传案例——ServiceImpl层（ShoppingServiceImpl）
/** * @Title: ShoppingServiceImpl.java * @Package org.service.impl * @Description: TODO该方法的主要作用: * @ ...
使用ueditor实现多图片上传案例——Service层（IShoppingService）
/** * @Title: IShoppingService.java * @Package org.service * @Description: TODO该方法的主要作用: * @author A ...
使用ueditor实现多图片上传案例——DaoImpl层（ShoppingDaoImpl）
/** * @Title: ShoppingDaoImpl.java * @Package org.dao.impl * @Description: TODO该方法的主要作用: * @author A ...

UploadFile图片上传案例

UploadFile图片上传案例

实现效果

HTML

JS

后台方法

UploadFile图片上传案例相关推荐

最新文章

热门文章