The recent development of the tossing mobile station involves uploading pictures inside a mobile phone. So after the N-long toss, find a plug-in, use the following:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
<!DOCTYPE HTML>
<
html lang
=
"zh-CN"
>
<
meta name
=
"viewport" content
=
"initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<
head
>
<
meta charset
=
"UTF-8"
>
<
title
>LocalResizeIMG</
title
>
</
head
>
<
style
>
body {
margin: 20px 20%;
color:#777;
text-align: center;
}
</
style
>
<
body
>
<
h1 class
=
"text-center"
>LocalResizeIMG-本地压缩 1.0</
h1
>
<
hr
/>
<
input type
=
"file" />
<
hr
/>
<!-- javascript
================================================== -->
<
script src
=
"/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type
=
"text/javascript"
></
script
>
<
script src
=
"/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type
=
"text/javascript"
></
script
>
<!-- mobileBUGFix.js 兼容修复移动设备 -->
<
script src
=
"/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type
=
"text/javascript"
></
script
>
<
script type
=
"text/javascript"
>
$(‘input:file‘).localResizeIMG({
width: 500,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
$(‘body‘).append(img);
//console.log(result);
$.ajax({
url: ‘./uploads.php‘,
type: ‘POST‘,
data:{formFile:result.clearBase64},
dataType: ‘HTML‘,
timeout: 1000,
error: function(){
alert(‘Error loading PHP document‘);
},
success: function(result){
//console.log(result);
alert("Uploads success~")
}
});
}
});
</
script
>
</
body
>
</
html
>
|
PHP Code:
123456 |
<?php
$base64 =
$_POST
[
‘formFile‘
];
$IMG =
base64_decode
(
$base64
);
$path =
‘./‘
;
file_put_contents
(
$path
.time().
‘.jpg‘
,
$IMG
);
?>
|
In front of the picture compression, and then converted to BASE64 encoding, and then the BASE64 encoding using AJAX to post to the server, and then in PHP to untie Base64, write to a file.
Original Plugin Address: Http://github.com/think2011/LocalResizeIMG
Then found that my friend also wrote an article on the use of this plugin, address here: http://a3147972.blog.51cto.com/2366547/1551066
Html5+js Compressed image upload