你的位置:首页 > ASP.net教程

[ASP.net教程]MVC微信浏览器图片上传(img转Base64)


因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器

话不多说, 贴代码

 

  • 先看前端显示出来的东西
  • OK 图片不重要,看代码 

 

 <!--微信图片上传-->        <section class="logo-license">          <div class="half">            <div class="uploader">              <a class="license">                @if (!string.IsNullOrEmpty(Model.ClassImage))                {                  <img id="img-1" src="@Model.ClassImage" />                }                else                {                  <img id="img-1" src="http://www.cnblogs.com//images/img_01.png" />                }              </a>              <input id="file0" class="file-3" name="imageData" type="file" width="130" height="130" accept="image/*" />            </div>            <div class="yulan">              <img src="" id="img0">              <div class="enter">                <button class="btn-2 fl">取消</button>                <input type="submit" class="btn-3 fr" value="确定" />              </div>            </div>          </div>          <div class="clear"></div>        </section>

 

再看js代码

 

 <script>    var subUrl = "";    $("#file0").change(function () {      //获取当前      var objUrl = getObjectURL(this.files[0]);      console.log(this.files[0])      obUrl = objUrl;      console.log("objUrl = " + objUrl);      if (objUrl) {        $("#img0").attr("src", objUrl).show();      }      else {        $("#img0").hide();      }    });    $(function () {      $(".file-3").bind('change', function () {        subUrl = $(this).val();        $(".yulan").show();        $(".file-3").val("");      });      $(".btn-3").click(function () {        $("#img-1").attr("src", obUrl);        $(".yulan").hide();        $(".file-3").parents(".uploader").find(".filename").val(subUrl);        var basepath = "";        var ClassID = $("#ClassID").val();        var TeacherID = $("#TeacherID").val();        var image = new Image();        image.crossOrigin = '';        image.src = obUrl;        image.onload = function () {          basepath = getBase64Image(image);          basepath = basepath.replace(/^data:image\/(png|jpg);base64,/, "")          //开始异步发送          $.ajax("/home/savenewsbackimage", {            data: JSON.stringify({ path: basepath, ClassID: ClassID, TeacherID: TeacherID }),            type: "POST", dataType: "text", contentType: "application/json;utf-8",            success: function (data) {              alert(data);            }          });        }      })      $(".btn-2").click(function () {        $(".yulan").hide();      })    });    function qd() {      var objUrl = getObjectURL(this.files[0]);      obUrl = objUrl;      console.log("objUrl = " + objUrl);      if (objUrl) {        $("#img0").attr("src", objUrl).show();      }      else {        $("#img0").hide();      }    }    function getObjectURL(file) {      var url = null;      if (window.createObjectURL != undefined) { // basic        url = window.createObjectURL(file);      } else if (window.URL != undefined) { // mozilla(firefox)        url = window.URL.createObjectURL(file);      } else if (window.webkitURL != undefined) { // webkit or chrome        url = window.webkitURL.createObjectURL(file);      }      return url;    }    //img转码base64    function getBase64Image(img) {      var canvas = document.createElement("canvas");      canvas.width = img.width;      canvas.height = img.height;      var ctx = canvas.getContext("2d");      ctx.drawImage(img, 0, 0, img.width, img.height);      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();      var dataURL = canvas.toDataURL("image/" + ext);      return dataURL;    }  </script>

 

 

再看服务器端代码

 

[HttpPost]    public ActionResult SaveNewsBackImage(string path, string ClassID, string TeacherID)    {      //保存图片到服务器,      string basePath = "/UploadPic/";      string imgname = DateTime.Now.Ticks + ".jpg";      string basepath = HttpContext.Server.MapPath(basePath);      string Pic_Path = basepath + imgname;      using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))      {        using (BinaryWriter bw = new BinaryWriter(fs))        {          byte[] data = Convert.FromBase64String(path);          bw.Write(data);          bw.Close();        }      }      //把图片地址存到数据库      string serpath = ConfigurationManager.AppSettings["Domain"].ToString();      string classimagePath = serpath + basePath + imgname;      var flag = new ClassBLL().SaveNewsBackImage(classimagePath, Convert.ToInt32(ClassID), Convert.ToInt32(TeacherID));      return Content("上传成功");    }

 

 

至此, 大家应该能看明白这个微信内置浏览器的上传方法了~  希望和我一样的朋友, 继续加油,奋斗~ 在路上