.net MVC+Bootstrap下使用localResizeIMG上传图片
程序员文章站
2022-09-03 10:02:29
本文实例为大家分享了使用localresizeimg上传图片的具体代码,供大家参考,具体内容如下
需要加载的头文件
html:
本文实例为大家分享了使用localresizeimg上传图片的具体代码,供大家参考,具体内容如下
需要加载的头文件
html:
<div class="form-group"> <label class="col-sm-6 control-label" for="inputfile">维修照片上传</label> <div class="col-sm-6 "> <div style="background:url(../../fonts/add.png) no-repeat;width:151px;height:150px;float:left;" id="div1"> <input type="file" accept="image/*" id="file" class="selectinput" style="width:151px;height:150px;opacity:.01"> </div> </div> </div>
accept=“image/*” 这里有些手机可以拍照 有些不行 没有具体测试统计
$("#file").localresizeimg({ width: 400, //height: 200, quality: 1, success: function (result) { var img = new image(); img.src = result.base64; //$("body").append(img); $("#odd").append(img); //呈现图像(拍照結果) $.ajax({ url: "/home/uploadimg", type: "post", data: { "formfile": result.clearbase64, "repairnum": $('#repairnum').val()}, datatype: "html", timeout: 1000, error: function () { alert("ajax error"); }, success: function (data) { //alert("uploads success~") } }); } });
界面样式
后台action base64stringtoimage 需要把压缩后的base64转换
[httppost] public actionresult uploadimg() { var file = request["formfile"]; var id = request["repairnum"]; string filename = "1.jpeg"; string filepath = server.mappath("~/upload/" + filename); try { base64stringtoimage(file, filepath); //upimg.saveas(filephysicalpath); //session["imgpath"] = path; //base64stringtoimage(file,); return content("上传成功"); } catch { return content("上传异常 !"); } } protected void base64stringtoimage(string strbase64, string filepath) { try { byte[] arr = convert.frombase64string(strbase64); memorystream ms = new memorystream(arr); system.drawing.bitmap bmp = new system.drawing.bitmap(ms); //bmp.dispose(); bmp.save(filepath, system.drawing.imaging.imageformat.jpeg); ms.close(); } catch (exception ex) { } }
参考和下载github:https://github.com/lyg945/localresizeimg/tree/master/
参考文章:
localresizeimg先压缩后使用ajax无刷新上传(移动端)
spring mvc+localresizeimg实现html5端图片压缩上传
推荐三款不错的图片压缩上传插件(webuploader、localresizeimg4、luploader)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Asp.net MVC使用swupload实现多图片上传功能
-
使用VUE+iView+.Net Core上传图片
-
.net mvc + layui做图片上传(二)—— 使用流上传和下载图片
-
.net MVC+Bootstrap下使用localResizeIMG上传图片
-
Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
-
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
-
使用tp3.2和mbUploadify.js上传图片的代码,记录一下
-
使用VUE+iView+.Net Core上传图片的方法示例
-
ASp.net下fckeditor配置图片上传最简单的方法
-
UWP 使用Windows.Web.Http命名空间下的HttpClient使用post方法,上传图片服务器