ホームページ >ウェブフロントエンド >jsチュートリアル >localResizeIMG は最初に圧縮し、次に ajax を使用して更新せずにアップロードします (モバイル端末)_javascript スキル
localResizeIMG は最初に圧縮し、次に ajax を使用して更新せずにアップロードします (モバイル端末)_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:45:491798ブラウズ
以下では、テキストの説明とコード分析を使用して、モバイル画像アップロード用の localResizeIMG を共有します。最初に圧縮してから、更新せずに ajax でアップロードします。具体的な実装プロセスについては、以下を参照してください。
現在、モバイル端末のピクセル数はますます高くなっています。ただし、モバイル端末での写真のアップロードは、PC でのアップロードとは少し異なります。モバイル端末で最初に画像を処理して再度アップロードするのは現実的ではありません。したがって、私が理解している解決策は、アップロードする前に画像を圧縮し、圧縮された画像をサーバーにアップロードすることです。
Googleで検索したところ、localResizeIMGを見つけました。これは、画像を指定した幅と品質に圧縮し、base64画像形式に変換し、ajaxを介してバックグラウンドに保存します。圧縮が完了したらアップロードします。
処理プロセス
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: 画像タイプの Base64 エンコード。img タグの src で直接使用できます (例: "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 ファイルに変換し、サーバーに保存して、プロンプトを表示する必要があります。 。
$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 を紹介するこの記事の全内容です。気に入っていただければ幸いです。