欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

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

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

页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、
HTML
首先我们放置一个上传按钮及相关预览信息等。








注意:上传前,先截图


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












2、
接着我们引用jQuery库和Jcrop插件。



3、
jQuery
接着我们看下表单的检查:
function checkForm() {
if (parseInt($('#w').val())) //若是没有截屏
return true;
$('.error').html('请先选择图片,并且截图').show();
return false;
}
4、
上传文件条件设置:
var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i;
if (!rFilter.test(oFile.type)) {
$('.error').html('请选择jpg、jpeg或png格式的图片').show();
return;
}

// check for file size
if (oFile.size > 1000 * 1024) {
$('.error').html('请上传小于1M的图片').show();
return;
}
查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/71.html

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