Rumah >hujung hadapan web >tutorial js >localResizeIMG mula-mula memampatkan dan kemudian menggunakan ajax untuk memuat naik tanpa menyegarkan semula (terminal mudah alih)_kemahiran javascript

localResizeIMG mula-mula memampatkan dan kemudian menggunakan ajax untuk memuat naik tanpa menyegarkan semula (terminal mudah alih)_kemahiran javascript

WBOYasal: 2016-05-16 15:45:491796semak imbas

Yang berikut menggunakan penerangan teks dan analisis kod untuk berkongsi dengan anda localResizeIMG untuk muat naik imej mudah alih Ia memampatkan dahulu dan kemudian memuat naiknya dengan ajax tanpa memuat semula. Sila lihat di bawah untuk proses pelaksanaan tertentu.

Pada masa kini, teknologi sangat maju sehinggakan peranti mudah alih semakin tinggi dan piksel yang lebih tinggi. Foto rawak adalah 2M Namun, memuat naik gambar pada terminal mudah alih adalah sedikit berbeza daripada saiz gambar pada terminal mudah alih dan biarkan pengguna memproses gambar itu dahulu. Memuat naiknya semula adalah tidak realistik. Jadi penyelesaian yang saya faham adalah untuk memampatkan imej sebelum memuat naik, dan kemudian memuat naik imej yang dimampatkan ke pelayan.

Selepas mencari di Google, saya menemui localResizeIMG Ia akan memampatkan imej kepada lebar dan kualiti yang anda tentukan dan menukarnya kepada format imej base64 Kemudian kami boleh memindahkan base64 ke latar belakang melalui ajax memuat naik selepas pemampatan dicapai.

Proses pemprosesan

Imej termampat LocalResizeIMG
Imej AjaxPost base64 ke latar belakang
Terima base64 di latar belakang dan simpannya, mengembalikan status
Kod bahagian hadapan

Perkara penting, petikan LocalResizeIMG.js (badan pemalam) dan mobileBUGFix.mini.js (tampung mudah alih)

<!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>

Bahagian Js, localResizeIMG dan bahagian penyerahan Ajax

Cara menggunakan

$('input:file').localResizeIMG({
   width: 400,//宽度
   quality: 1,//质量
   success: function (result) {
      result.base64/result.clearBase64
   }
});

parameter localResizeIMG:

lebar: lebar lakaran kecil
Kualiti: Kualiti gambar, 0-1, lebih besar lebih baik

nilai pulangan localResizeIMG

result.base64: Pengekodan Base64 dengan jenis imej, yang boleh digunakan terus dalam src teg img, seperti "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY";

result.clearBase64: pengekodan tanpa jenis imej, seperti "/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);
      }
    }); 
   }
 });
});

Simpan fail

Dalam langkah di atas, kami menghantar result.clearBase64 ke dalam upload.php melalui Ajax Seterusnya, kami perlu menerima parameter base64 dalam upload.php, menukarnya menjadi fail img, menyimpannya ke pelayan dan memberikan 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 ); 
 }

Kekurangan

Mod imej selepas pemampatan localResizeIMG semuanya jpeg, dan format asal tidak boleh dijamin.

Apabila lebar imej lebih kecil daripada parameter lebar yang ditetapkan oleh localResizeIMG, imej akan diregangkan, menyebabkan herotan imej (contohnya, apabila ketinggian lebar ialah 600 dan imej hanya 400px, imej yang dimampatkan menjadi 600px dan saiz imej menjadi Jika ia terlalu besar, ia akan diherotkan).

Kandungan di atas adalah keseluruhan kandungan artikel ini yang memperkenalkan localResizeIMG untuk memampatkan dahulu dan kemudian memuat naiknya menggunakan ajax tanpa menyegarkan saya harap anda menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：tuzhu_req.js menyedari kesan meniru gambar Baidu homepage_jqueryArtikel seterusnya：tuzhu_req.js menyedari kesan meniru gambar Baidu homepage_jquery

Artikel berkaitan

Lihat lagi