.net MVC+Bootstrap下使用localResizeIMG上传图片
本文实例为大家分享了使用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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JSON.stringify(递归)与 JSON.parse(有限状态自动机)的实现代码
这篇文章主要介绍了JSON.stringify(递归)与 JSON.parse(有限状态自动机)的实现,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08JavaScript markdown 编辑器实现双屏同步滚动
这篇文章主要介绍了JavaScript markdown 编辑器实现双屏同步滚动,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下2022-08-08
最新评论