利用LocalResizeIMG插件压缩图片通过ajax上传图片(ASP版)

时间:2022-06-01 21:27:20
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>送大礼-圣源祥河南分公司</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/LocalResizeIMG.js'></script>
<script type='text/javascript' src='js/patch/mobileBUGFix.mini.js'></script>
<style type="text/css">
body{font-family:"微软雅黑"; font-size:12px}
.uploadbtn{ display:block;height:40px; line-height:40px; color:#333; text-align:center; width:100%; background:#f2f2f2; text-decoration:none; }
.imglist{min-height:200px;margin:10px;}
.imglist img{width:100%;}
.iptxt{width:50%;height:20px;color:#333;padding:0px 5px;border:1px solid #b6d3ff;-moz-border-radius:0.3em;-webkit-border-radius:0.3em;border-radius:0.3em;margin:1px 0;font-size:12px;}
</style>
</head>
<body>

<div style="width:100%;margin:10px auto; border:solid 1px #ddd; overflow:hidden;">
<form name="myform" id="myform" action="save.asp" method="post">
姓名:<input type="text" class="iptxt" name="realname" /><br />
电话:<input type="text" class="iptxt" name="tel" /><br />
身份证:<input type="button" onClick="uploadphoto.click()" value="上传正面" /> <input type="button" onClick="uploadphoto.click()" value="上传反面" /><br />
推荐人姓名:<input type="text" class="iptxt" name="rec_realname" /><br />
推荐人电话:<input type="text" class="iptxt" name="rec_tel" /><br />
签名照:<input type="button" onClick="uploadphoto.click()" value="上传" />
<input type="hidden" name="fileList" id="fileList" /> <input type="button" value="读取文件列表" onClick='alert($("#fileList").val());' />
<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
<div class="imglist"></div>
<a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
<input type="submit" value="提交" />
</form>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$('#uploadphoto').localResizeIMG({
width: 400,
quality: 1,
success: function (result) {
var submitData={
base64_string:result.clearBase64,
};
//alert(result.clearBase64);
$.ajax({
type: "POST",
url: "upload.asp",
data: submitData,
dataType:"json",
success: function(data){
if (0 == data.status) {
alert(data.content);
return false;
}else{
alert(data.content);
var attstr= '<img src="'+data.url+'" width="30%" height="30%" />';
$(".imglist").append(attstr);


var filelist=$("#fileList").val();
if(filelist!=''){
filelist+='|'+data.url;
}
else{
filelist=data.url;
}

$("#fileList").val(filelist);

return false;
}
},
complete :function(XMLHttpRequest, textStatus){
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
});
});
</script>
</body>
</html>

upload.asp


dim content,user_serial,path
Dim xml:Set xml=Server.CreateObject("MSXML2.DOMDocument")
Dim stm:Set stm=Server.CreateObject("ADODB.Stream")
xml.resolveExternals=False

content=Request.Form("base64_string") 'base64位加密的图片信息

randomize
ranNum=int(90000*rnd)+10000
path="../UploadFile/"&year(now)&month(now)&day(now)&hour(now)&minute(now)&second(now)&ranNum&".jpeg" '图片保存路径

xmlStr="<?xml version=""1.0"" encoding=""utf-8""?><data>"&content&"</data>"

xml.loadXML(xmlStr) '加载xml文件中的内容,使用xml解析出

xml.documentElement.setAttribute "xmlns:dt","urn:schemas-microsoft-com:datatypes"
xml.documentElement.dataType = "bin.base64"

stm.Type=1 'adTypeBinary
stm.Open
stm.Write xml.documentElement.nodeTypedValue
stm.SaveToFile Server.MapPath(path) '文件保存到指定路径
'response.Write(path)
if err.number=0 then
Response.Write("{""status"":1,""content"":""上传成功"",""url"":"""&path&"""}")
else
Response.Write("{""status"":0,""content"":""上传失败""}")
end if

stm.Close
Set xml=Nothing
Set stm=Nothing