手机端利用JS压缩图片并上传

最新推荐文章于 2024-09-07 13:49:10 发布

锋回路转2022

最新推荐文章于 2024-09-07 13:49:10 发布

阅读量2.1k

点赞数 6

分类专栏：原创文章文章标签： javascript 前端

本文链接：https://blog.csdn.net/jlxulifeng/article/details/127383383

版权

原创文章专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该博客介绍了一种在手机端使用JavaScript对图片进行压缩，然后通过AJAX上传到服务器的方法。服务器端使用ASP接收并保存图片，同时对图片格式和大小进行了限制。整个过程包括前端图片选择、压缩、上传以及服务器端的接收和保存策略。

摘要由CSDN通过智能技术生成

本人水平有限，如有错误，欢迎指正，谢谢！

思路：

1、手机端选择图片或拍照后，由于体积过大，上传到服务器端后，不仅占用服务器磁盘空间，而且打开速度慢，所以采用前端JS对图片进行压缩后上传。

2、服务器端用ASP进行接收并保存，返回上传后的图片文件名，手机端获取到图片后，利用URL即可打开上传后的图片。

3、可对图片文件格式及大小进行限制。

手机端：

<%@codepage="65001"%>
<%response.charset="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript">

// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];

   fileext=right($("#jjfxSoft_iconPath").val(),4).toUpperCase();
   if((fileext!=".JPG")&&(fileext!=".PNG")){
       alert("对不起，文件格式不正确，只能上传JPG或PNG文件！");
       return;
   }

// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
}

function up(){
$("#jjfxSoft_iconPath").click();
}
</script>
<title>物品照片上传</title>
</head>
<body style="list-style:none; color:#666; line-height:35px;">
<span id="bs" style="display:none;"><%=request.querystring("bs")%></span>
<img id="ceshi" style="display:none;">
<div style="width:100%;">
<li style=" width:90%; margin-left:5%;">点击图片上传照片</li>
<img id="ceshi1" src="images/uploadpic.png" style="width:90%; margin-left:5%;" onClick="up();">
<li style="width:90%; margin-left:5%;">文件大小不超过6MB，JPG或PNG格式</li>
</div>
<input name="file" type="file" id="jjfxSoft_iconPath" style="display:none;">
</body>
</html>

服务器接收端：SavePhoto.asp

<%@codepage="65001"%>
<%response.charset="utf-8"%>
<%
Randomize

function GetRndFileName(namelen)
clist="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
jg=""
for i=1 to namelen
p=INT(62*RND())+1
jg=jg&mid(clist,p,1)
next
GetRndFileName=jg
end function

fileext=request.querystring("FileExt")
BS=request.querystring("bs")
filename="P"&GetRndFileName(10)&fileext

Dim FormData, FormSize , DataStart , CLStr
FormSize = Request.TotalBytes
FormData = Request.BinaryRead(FormSize)
set alldata=server.createobject("ADODB.Stream")
alldata.Type=1
alldata.open

alldata.Write FormData

dim Binary
alldata.position=0
Binary=alldata.Read

CLStr=ChrB(13)&ChrB(10)
DataStart=InStrB(Binary,CLStr&CLStr)+4
DivStr = LeftB(Binary,InStrB(Binary,CLStr)-1)
DataSize=InStrB(DataStart+1,Binary,DivStr)-DataStart-2

if fix(DataSize/1024)>6144 then
alldata.close
set alldata=nothing
response.write "-1"
response.end
end if

set st=Server.CreateObject("ADODB.Stream")
st.Type=1
st.Mode=3
st.open
alldata.position=DataStart-1
alldata.copyto st,DataSize
st.SaveToFile Server.MapPath("/Upload/"&filename),2
st.close
set st=nothing
alldata.close
set alldata=nothing
response.write filename
response.end