LocalResizeIMG+asp.net实现图片压缩上传
郎德馨
最近项目中遇到移动端上传图片文件，但是网上基本是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;
}
//保存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
类似资料：