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

前端之家收集整理的这篇文章主要介绍了利用LocalResizeIMG插件压缩图片通过ajax上传图片(ASP版)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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

猜你在找的Ajax相关文章