Jquery单图片压缩上传插件pictureHandle.js

一款简单实用的Jquery单图片压缩上传插件，轻量级的pictureHandle.js，可以实时预览压缩前和压缩后的图片，设置很简单效果很直观。

分类：html5 > 上传难易：

查看演示下载资源下载积分： 30 积分

首先引入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":"上传成功!"}';
?>