jq 图片文件上传，并预览和展示缩略图，请求给ashx处理上传到服务器

以下仅是给自己做个记录，当然也有参考各位大佬的，方便以后查阅
html部分

  <form id="uploadForm" enctype="multipart/form-data">
                    <input type="file" id="uploadImg" onchange="UploadImg(this)"> 
                    <canvas id="canvasImg"></canvas> 
                     <span>付款凭证：</span>--%>
                    <div style="position: absolute; top: 20px; right: 20px;">
                          <a onclick="showCanvasImg()" href="javascript:void(0);">预览</a>&nbsp;&nbsp;
                        <a onclick="ajaxFileUpload()" href="javascript:void(0);">上传</a>
   </form>

jq部分

  function  UploadImg(obj) {
            file = obj.files[0];
            //var url = window.webkitURL.readAsDataURL(file);
            //alert(url);

            if (file != null) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //将file对象base64转码成功后进入
                reader.onload = function () {
                    //声明img标签，并将未压缩的图片赋值给src属性
                    var image = $('#selectImg');
                    image.attr('src', this.result);
                    image.on('load', function () {
                        //定义canvas的宽、高为72px
                        var square = 72;
                        var canvas = $('#canvasImg');
                        var context = document.getElementById("canvasImg").getContext("2d");
                        // Canvas.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); 
                        canvas.width = square;
                        canvas.height = square;
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        var imageWidth;
                        var imageHeight;
                        var imageHeight;
                        var offsetX = 0;
                        var offsetY = 0;
                        //判断是根据原图片的宽压缩还是高压缩
                        if (canvas.width > canvas.height) {
                            imageWidth = Math.round(square * canvas.width / canvas.height);
                            imageHeight = square;
                            offsetX = - Math.round((imageWidth - square) / 2);
                        } else {
                            imageHeight = Math.round(square * canvas.height / canvas.width);
                            imageWidth = square;
                            offsetY = - Math.round((imageHeight - square) / 2);
                        }
                        context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
                        //data即为压缩为72x72的压缩图片的base64内容
                        var data = canvas.toDataURL('image/jpeg');
                    });
                };
              
            }
        }

与后台交互的jq代码：

     function ajaxFileUpload() {

            var fileObj = document.getElementById("uploadImg").files[0]; // js 获取文件对象
            if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                alert("请选择图片");
                return;
            }
            var formFile = new FormData();//post文件到后台，必须是from，而且要申明enctype="multipart/form-data"
            formFile.append("action", "UploadVMKImagePath");
            formFile.append("file", fileObj); //加入文件对象

            $.ajax({
                url: "../kalianfu/UploadImgSave.ashx",
                type: 'post',
                data: formFile,
                processData: false,
                cache: false, 
                processData: false,
                contentType: false,
                success: function (data) {
                    //data = "{msg:"timg (3)201908211037558032.jpg",code:"10000"}" 需要转换为json对象
                    console.log(JSON.parse(data), '--');
                    const DATA = JSON.parse(data);
                    payCertificate = getRootPath() + "/uploadfile/" + DATA.msg;
                    console.log(payCertificate, '-----payCertificate----')
                    $("#payCertificate").val(payCertificate);
                    if (DATA.code = "10000") {
                        alert("上传成功！");
                    } else {
                        alert(DATA.msg)
                    }
                }, error: function () {
                    alert("上传失败！");
                }
            })
        }
        function getRootPath() {
            //获得根目录  http://kalianfu.mobile-lapramol.co/m~/uploadfile/tim
            var strFullPath = window.document.location.href;
            var strPath = window.document.location.pathname;
            var pos = strFullPath.indexOf(strPath);
            var prePath = strFullPath.substring(0, pos); 
            return (prePath);
        }

ashx部分

<%@ WebHandler Language="C#" Class="UploadImgSave" %>

using System;
using System.Web;
using System.IO;
using System.Text;
using System.Web;

public class UploadImgSave : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        //在此处写入您的处理程序实现。
        context.Response.ContentType = "text/html";//这里一定要html

        string time = DateTime.Now.ToString("yyyyMMddHHmmssffff");
        var files = context.Request["file"];
        if (context.Request.Files.Count > 0)
        {
            HttpPostedFile file = context.Request.Files[0];
            if (file.ContentLength > 0)
            {
                int length = file.FileName.Length;
                int dianLength = file.FileName.LastIndexOf('.');
                string filename = file.FileName.Substring(0, dianLength);
                string suffix = file.FileName.Substring(file.FileName.LastIndexOf('.'));//后缀
                if (".jpg.png.gif.jpeg".IndexOf(suffix.ToLower()) == -1)//文件格式,这里采用图片格式说明
                {
                    context.Response.Write("{\"msg\":\"文件格式不正确!\",\"code\":\"10001\"}");
                    return;
                }

                try
                {
                    file.SaveAs(context.Server.MapPath("~/uploadfile/") + filename+time+suffix);
                    context.Response.Write("{\"msg\":\"" + filename+time+suffix + "\",\"code\":\"10000\"}");
                    return;
                }
                catch (Exception ex)
                {
                    context.Response.Write("{\"msg\":\"" + HttpUtility.HtmlEncode(ex.Message) + "\",\"code\":\"10001\"}");
                    return;
                }
            }
            context.Response.Write("{\"msg\":\"请选择要上传的文件!\",\"code\":\"10001\"}");
            return;
        }
        context.Response.Write("{\"msg\":\"请选择要上传的文件!\",\"code\":\"10001\"}");
        return;

    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    private static readonly object writeFile = new object();
    public static void WriteLog(string debugstr)
    {
        lock (writeFile)
        {
            FileStream fs = null;
            StreamWriter sw = null;

            try
            {
                string filename = DateTime.Now.ToString("yyyy-MM-dd") + ".txt";
                //服务器中日志目录
                string folder = HttpContext.Current.Server.MapPath("~/Log");
                if (!Directory.Exists(folder))
                    Directory.CreateDirectory(folder);
                fs = new FileStream(folder + "/" + filename, System.IO.FileMode.Append, System.IO.FileAccess.Write);
                sw = new StreamWriter(fs, Encoding.UTF8);
                sw.WriteLine(DateTime.Now.ToString() + "     " + debugstr + "\r\n");
            }
            finally
            {
                if (sw != null)
                {
                    sw.Flush();
                    sw.Dispose();
                    sw = null;
                }
                if (fs != null)
                {
                    //     fs.Flush();
                    fs.Dispose();
                    fs = null;
                }
            }
        }
    }

}

效果图【因为本身就有框架，所以这些只是实现文件上传 预览 上传的功能代码】