localResizeIMG は最初に圧縮し、次に ajax を使用して更新せずにアップロードします (モバイル端末)

localResizeIMG は最初に圧縮し、次に ajax を使用して更新せずにアップロードします (モバイル端末)_javascript スキル

WBOY

リリース： 2016-05-16 15:45:49

オリジナル

1762 人が閲覧しました

以下では、テキストの説明とコード分析を使用して、モバイル画像アップロード用の 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 を紹介するこの記事の全内容です。気に入っていただければ幸いです。