首頁 > php教程 > php手册 > PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

WBOY
發布: 2016-06-07 11:38:54
原創
1568 人瀏覽過

在网上找到了图片上传插件jquery.min.js,但没有上传功能,自己花了10分钟给加上去了哈,如有bug请在素材火网页内留言,一般当天改完上传。
PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)

页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br> HTML<br> 首先我们放置一个上传按钮及相关预览信息等。<br> <form>  <br>    <!-- hidden crop params -->  <br>    <input>  <br>    <input>  <br>    <input>  <br>    <input>  <br>    <input>  <br>    <div> <br>     注意:上传前,先截图 <br>    </div>  <br>    <div>  <br>     <img alt="PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)" >  <br>     <div>  <br>      <ul>  <br>       <li> <label>文件大小</label> <input> </li>  <br>       <li> <label>类型</label> <input> </li>  <br>       <li> <label>图像尺寸</label> <input> </li>  <br>       <li> <label>宽度</label> <input> </li>  <br>       <li> <label>高度</label> <input> </li>  <br>      </ul>  <br>     </div>  <br>     <input>  <br>    </div>  <br> </form> <br> 2、<br> 接着我们引用jQuery库和Jcrop插件。<br> <link> <br> <script></script>  <br> <script></script><br> 3、<br> jQuery<br> 接着我们看下表单的检查:<br> function checkForm() { <br>     if (parseInt($('#w').val())) //若是没有截屏 <br>         return true; <br>     $('.error').html('请先选择图片,并且截图').show(); <br>     return false; <br> }<br> 4、<br> 上传文件条件设置:<br> var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i; <br> if (!rFilter.test(oFile.type)) { <br>     $('.error').html('请选择jpg、jpeg或png格式的图片').show(); <br>     return; <br> } <br>  <br> // check for file size <br> if (oFile.size > 1000 * 1024) { <br>     $('.error').html('请上传小于1M的图片').show(); <br>     return; <br> }查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/71.html

AD:真正免费,域名+虚机+企业邮箱=0元

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板