javascript異步上傳壓縮圖片並當即顯示圖片

時間 2020-05-25

標籤 javascript 異步上傳壓縮圖片並當顯示欄目 JavaScript 简体版

原文原文鏈接

javascript異步上傳壓縮圖片並當即顯示圖片
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<script type="text/javascript" src="./js/lrz.mobile.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body class="upload">
<form id="form">
<div id="img_show"></div>
<div id="upload">
<div id="img_file"><input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file"/><div class="btn">選擇圖片</div></div>
</div>
<input type="submit" class="tijiao" value="提交">
</form>
</body>javascript

<input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" type="file" multiple />
加了multiple就能夠多圖上傳了
1.首先你要載入JS類庫：
<pre>
<script type="text/javascript" src="./js/lrz.mobile.min.js"></script>
</pre>
2.而後就是寫好formhtml

3.準備處理圖片以及圖片異步提交的JS。
<pre>
<script type="text/javascript">
var img;
$("input:file").change(function (){java

//console.log(this.files[0]);若是多圖上傳就會有多個數組了到時候須要循環遍歷下就好了不設置就原圖尺寸
lrz(this.files[0],{width:640,quality:0.9},function(rst){
img = rst.base64;
var html = [];
var show_img = new Image();
show_img.src = rst.base64;
$("#img_show").html("<div class='upimg'></div>");
$(".upimg").html(show_img);
});
});
$("#form").submit(function (){
var phone = $("input[name='phone']").val();
var month = $("input[name='month']").val();
$.post("upload.php",{img:img},function(data){
img = null;
alert(data.msg);
},'json');
return false;
});
</script>
</pre>jquery

從代碼中能夠看出，這個JS庫是把圖片轉成碼，而後用變量存起來，而後在用異步POST到服務器中在處理。json

看起來貌似沒有什麼特別的地方，的確實在也沒有什麼特別的地方.......後端

後臺處理程序PHP：
<pre>
function error($msg=''){
$return = array('msg'=>$msg);
echo json_encode($return);
exit();
}數組

function main(){
if(!$_POST['img']){
error('請上傳圖片!');
}

$img = $_POST['img'];

$path = './upload/';

$type_limit = array('jpg','jpeg','png');服務器

if(preg_match('/data:\s*image\/(\w+);base64,/iu',$img,$tmp)){
if(!in_array($tmp[1],$type_limit)){
error('圖片格式不正確，只支持jpg,jpeg,png!');
}
}else{
error('抱歉！上傳失敗，請從新再試!');
}

$img = str_replace(' ','+',$img);

$img = str_replace($tmp[0], '', $img);異步

$img = base64_decode($img);

$file = $path . rand(1,10000).time() . '.' . $tmp[1];
if(!file_put_contents($file,$img)){
error('上傳圖片失敗!');
}else{
error('恭喜您！上傳成功!');
}
}
main();
</pre>

上述代碼若是有錯誤歡迎指出。

如上訴代碼，正如你看到的那樣，通過BASE64加密過的圖片碼通過JS異步的POST過來後端後，咱們要把代碼還原。可是JS庫加密的時候會帶有一些標籤，因此還原前須要處理掉這些原本不屬於圖片的東西。
<pre>

$img = str_replace(' ','+',$img);

$img = str_replace($tmp[0], '', $img);

$img = base64_decode($img);
</pre>

最後把代碼塞進文件，設置好相應的文件名和擴展名，圖片就成功上傳到了服務器了。

注意：

先後端包括JS編碼要要一致，建議UTF-8

若是圖片還原不會來的話，那確定是數據問題，打印POST過來的圖片碼出來看看。

代碼下載地址<a href="http://newmiracle.cn/wp-content/uploads/2017/01/testtupian.zip">代碼下載</a>