一款简单实用的Jquery单图片压缩上传插件,轻量级的pictureHandle.js,可以实时预览压缩前和压缩后的图片,设置很简单效果很直观。
首先引入css样式表、jquery库和上传压缩插件pictureHandle.js。
<link type="text/css" rel="stylesheet" href="css/uploadSingleImg.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css"><!--自行修改input样式-->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/pictureHandle.js"></script>
然后设置body部分的form表单,结构如下:
<form>
<!--文件选择input-->
<h3>文件选择:</h3>
<input class="btn btn-default" type="file" id="upFile" />
<!--文件选择input中已选择文件重置(采用form表单的reset重置按钮重置)-->
<h3>重置文件选择:</h3>
<input class="btn btn-default" type="reset" id="reBtn" value="清空" />
<!--提交压缩后的base64文件数据给后台-->
<h3>传给后台</h3>
<input class="btn btn-default" type="button" id="upTo" value="提交"/>
<!--后台所要获取的文件base64-->
<h3>后台获取base64文件数据:(一个隐藏域)</h3>
<input id="imgOne" name="imgOne" type="hidden"/>
<!--所选文件压缩前预览-->
<h3>压缩前预览:</h3>
<img src="" id="preview"/>
<!--所选文件压缩后预览-->
<h3>压缩后预览:</h3>
<img src="" id="nextview"/>
</form>
可以自行设置写入到服务器里,示范代码如下:
<?php
//解码
$tmp = base64_decode($_POST['imgOne']);
//写文件
file_put_contents("Y://img.jpg", $tmp);
echo '{"msg":"上传成功!"}';
?>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791