LocalResizeIMG+asp.net实现图片压缩上传

时间:2022-05-23 19:43:06

最近项目中遇到移动端上传图片文件,但是网上基本是SWF模式上传的。LocalResizeIMG很适合。

有因为小生不是学PHP的,网上demo基本是PHP,自己摸索做出来了asp.net版本的,希望对网友有所帮助。


首先是html:

  <a href="javascript:;" class="a-upload">
                        <input type="file" id="IDcard_pic" name="IDcard_pic" accept="image/jpeg" />
                            <span>点击这里上传文件</span>
                    </a>
这里是三个存放路径的隐藏域
 <input type="hidden" id="hididcard" name="hididcard" value="" />
                <input type="hidden" id="hidphoto" name="hidphoto" value="" />
                <input type="hidden" id="hiddiploma" name="hiddiploma" value="" />

其次是最重要的js代码,为了方便就直接在它demo的js里面做了。

input0.onchange = function () {
     
        // 也可以传入图片路径:lrz('../demo.jpg', ...
        lrz(this.files[0], { width:800,quality:0.7}, function (results) {
            // 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。
            console.log(results);
            setTimeout(function () {
                //if (results.base64.length > 5242880)
                //{
                //    $.dialog.tips("上传失败,文件过大,请上传小于5M的图片", 1, "32X32/succ.png", function () {
                //        location.reload();
                //    });
                //}
                // 发送到后端
                var xhr = new XMLHttpRequest();
                var data = {
                    base64: results.base64,
                    size: results.base64.length, // 校验用,防止未完整接收
                    name:results.origin.name
                };

                xhr.open('POST', '../../Upload.ashx?action=uploadImg', true);
                xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        if (xhr.response != 0) {
                            //sessionStorage.setItem("idcard", xhr.response);
                            //document.cookie = "idcard=" + xhr.response;
                            var index= xhr.response.toString().indexOf('&');
                            $("#hididcard").val(xhr.response.substring(0, index));
                            $(input0).parent('a').find('span').html(xhr.response.toString().substr(index + 1));
                        }

                        //result.error
                        //    ? alert('服务端错误,未能保存图片')
                        //    : demo_report('服务端实存的图片', result.src, result.size);
                    }
                };

                xhr.send(JSON.stringify(data)); // 发送base64
            }, 100);
        });
    };

results.base64封装了图片的信息,可以通过它获得压缩后的图片信息

LocalResizeIMG有很多设置图片的字段,我不多说

在data里,你可以把results.base64的其他信息同时发送到后台


通过XmlHttpRequest把数据发送到后端,在后端通过一个一般处理程序完成文件的保存。

以下为一般处理程序Upload.ashx部分代码:

/// <summary>
        /// 上传图片
        /// </summary>
        /// <param name="context"></param>
        public void UploadImg(HttpContext context)
        {
            //获取base64编码
            Dictionary<String, Object> dicParameter = GetParameter(context);
            string base64 = dicParameter["base64"].ToString();//base64编码
            int size = Convert.ToInt32(dicParameter["size"].ToString());//base64大小
            string filename = dicParameter["name"].ToString();//原文件名
            base64 = base64.Replace(" ", "+");//修复base64将+转为空格

            string uid = context.Request.QueryString["uid"];//获得用户id
            uid = uid.Substring(0, uid.Length - 1);//不知道为什么,uid后面有一个空格
            string type = context.Request.QueryString["type"];//获得上传文件类型
            string basePath="/uploads/";//基本路径
            //string filePath = CommonUtil.GetMapPath(basePath);//文件夹路径
            string name = uid + "_" + type + "_"+filename ;//上传到服务器的文件名

            //检查上传的物理路径是否存在,不存在则创建
            if (!Directory.Exists(filePath))
            {
                Directory.CreateDirectory(filePath);
            }
            foreach (string file in Directory.EnumerateFiles(filePath))//删除已上传的图片
            {
                if (file.Substring(file.LastIndexOf("\\")+1).StartsWith(uid + "_" + type + "_"))
                {
                    File.Delete(file);
                }
            }
            try
            {
                 Base64StringToImage(base64.Substring(base64.LastIndexOf(",") + 1), filePath + name);//图片保存
                 string dese = DESEncrypt.Encrypt(basePath + name);//加密数据
                 context.Response.Write(dese+"&"+filename);//返回加密的文件路径和原文件名
            }
            catch
            {
                context.Response.Write(0);
            }
            context.Response.End();
        }

base64 = base64.Replace(" ", "+");不知道base64为何把‘+’转成空格了,废了我将近一天时间。如果大家没有这种情况便可省略。

        /// <summary>
        /// 获取参数
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        private Dictionary<String, Object> GetParameter(HttpContext context)
        {
            StreamReader reader = new StreamReader(context.Request.InputStream);
            String strJson = HttpUtility.UrlDecode(reader.ReadToEnd());
            JavaScriptSerializer jss = new JavaScriptSerializer();
            //将json字符串反序列化成一个Dictionary对象
            Dictionary<String, Object> dicParameter = jss.Deserialize<Dictionary<String, Object>>(strJson);
            return dicParameter;
        }


后台通过GetParameter方法获取传过来的data


 //保存base64编码到图片文件
        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)
            {
            }
        }

上传到服务器的文件名规则是:uid_type_原文件名称

上传到服务器的文件路径自己再做下手脚吧,这个不多说。

我是对上传后的文件路径做了加密操作,然后传回前台的是一串编码不是原路径的字符串。同时把原文件名传回前台,方便使用。

完成图片保存后,显示上传文件的名称,表示已上传完毕。


缺点:没有实现上传文件大小限制


我使用的是这个LocalResizeIMG3