localResizeIMG는 먼저 압축한 다음 ajax를 사용하여 새로 고침 없이 업로드합니다(모바일 터미널)_javascript 기술
- WBOY원래의
- 2016-05-16 15:45:491795검색
다음은 모바일 이미지 업로드를 위한 localResizeIMG를 공유하기 위해 텍스트 설명과 코드 분석을 사용합니다. 먼저 압축한 다음 새로 고치지 않고 ajax로 업로드합니다. 구체적인 구현 프로세스는 아래를 참조하세요.
요즘은 모바일 기기의 픽셀이 점점 높아지는 추세입니다. 임의의 사진은 2M이지만 모바일 단말기에 업로드하는 사진의 크기는 약간 다릅니다. 모바일 단말기에서 사용자가 먼저 사진을 처리하도록 놔두는 것은 비현실적입니다. 그래서 제가 이해하는 해결책은 업로드하기 전에 이미지를 압축한 다음, 압축된 이미지를 서버에 업로드하는 것입니다.
Google에서 검색한 결과 localResizeIMG를 찾았습니다. 이미지를 지정한 너비와 품질로 압축한 다음 base64 이미지 형식으로 변환한 다음 ajax를 통해 base64를 배경으로 전송하고 저장하는 것입니다. 압축이 완료된 후 업로드합니다.
처리과정
LocalResizeIMG 압축 이미지
Ajax이미지 base64를 배경에 게시
백그라운드에서 base64를 받아 저장하고 상태를 반환합니다
프론트엔드 코드
핵심 사항, LocalResizeIMG.js(플러그인 본문) 및 mobileBUGFix.mini.js(모바일 패치) 인용
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传</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:"微软雅黑"}
.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%;}
</style>
</head>
<body>
<div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
<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>
</div>
<div style="text-align:center;margin-top:50px;">@ <a href="http://www.devdo.net/">码农小兵,专注web开发 欢迎投稿</a></div>
</body>
</html>
Js 부분, localResizeIMG 및 Ajax 제출 부분
사용방법
$('input:file').localResizeIMG({
width: 400,//宽度
quality: 1,//质量
success: function (result) {
result.base64/result.clearBase64
}
});
localResizeIMG 매개변수:
너비: 썸네일 너비
품질: 화질, 0-1, 클수록 좋습니다
localResizeIMG 반환 값
result.base64: img 태그의 src에서 직접 사용할 수 있는 이미지 유형의 Base64 인코딩(예: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY";
result.clearBase64: "/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY"와 같은 이미지 유형 없이 인코딩
$(document).ready(function(e) {
$('#uploadphoto').localResizeIMG({
width: 400,
quality: 1,
success: function (result) {
var submitData={
base64_string:result.clearBase64,
};
$.ajax({
type: "POST",
url: "upload.php",
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+'" alt="" />';
$(".imglist").append(attstr);
}
},
complete :function(XMLHttpRequest, textStatus){
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
});
});
파일 저장
위 단계에서는 Ajax를 통해 result.clearBase64를 upload.php에 전달했습니다. 다음으로 upload.php에서 base64 매개변수를 받아 img 파일로 변환한 후 서버에 저장하고 Prompt를 제공해야 합니다. .
$base64_string = $_POST['base64_string'];
$savename = uniqid().'.jpeg';//localResizeIMG压缩后的图片都是jpeg格式
$savepath = 'images/'.$savename;
$image = base64_to_img( $base64_string, $savepath );
if($image){
echo '{"status":1,"content":"上传成功","url":"'.$image.'"}';
}else{
echo '{"status":0,"content":"上传失败"}';
}
function base64_to_img( $base64_string, $output_file ) {
$ifp = fopen( $output_file, "wb" );
fwrite( $ifp, base64_decode( $base64_string) );
fclose( $ifp );
return( $output_file );
}
단점
localResizeIMG 압축 후의 이미지 모드는 모두 jpeg이며 원본 형식을 보장할 수 없습니다.
이미지 너비가 localResizeIMG에서 설정한 너비 매개변수보다 작으면 이미지가 늘어나서 이미지 왜곡이 발생합니다(예를 들어 너비 높이가 600이고 이미지가 400px에 불과한 경우 압축된 이미지는 600px이 되고 이미지 크기가 너무 크면 왜곡될 수 있습니다.) 혹시 좋은 해결 방법이 있는지 궁금합니다.
위 내용은 먼저 압축한 후 새로 고치지 않고 Ajax를 사용하여 업로드하는 localResizeIMG를 소개하는 이 기사의 전체 내용입니다.