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

时间:2022-04-16 20:30:02

最近项目中遇到移动端上传图片文件,但是网上基本是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