PHP+jQuery+html5实现图片选取裁剪上传(兼容手机上传)
在网上找到了图片上传插件jquery.min.js,但没有上传功能,自己花了10分钟给加上去了哈,如有bug请在素材火网页内留言,一般当天改完上传。
页面底部有演示、免费下载链接。若是想看更多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 src="/static/imghw/default1.png" data-src="jquery.js" class="lazy" 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元

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

了解Python编程的入门级代码示例Python是一种简单易学,功能强大的编程语言。对于初学者来说,了解Python编程的入门级代码示例是非常重要的。本文将为您提供一些具体的代码示例,帮助您快速入门。打印HelloWorldprint("HelloWorld")这是Python中最简单的代码示例。print()函数用于将指定的内容输出

PHP变量存储程序运行期间的值,对于构建动态且交互式的WEB应用程序至关重要。本文将深入探讨php变量,并通过10个真实的示例展示它们的实际应用。1.存储用户输入$username=$_POST["username"];$passWord=$_POST["password"];此示例从表单提交中提取用户名和密码,并将其存储在变量中以供进一步处理。2.设置配置值$database_host="localhost";$database_username="username";$database_pa

标题:从入门到精通:Go语言中常用数据结构的代码实现数据结构在编程中起着至关重要的作用,它是程序设计的基础。在Go语言中,有许多常用的数据结构,掌握这些数据结构的实现方式对于成为一名优秀的程序员至关重要。本文将介绍Go语言中常用的数据结构,并给出相应的代码示例,帮助读者从入门到精通这些数据结构。1.数组(Array)数组是一种基本的数据结构,是一组相同类型

如何使用PHP编写库存管理系统中的库存分仓管理功能代码库存管理是许多企业中不可或缺的一部分。对于拥有多个仓库的企业来说,库存分仓管理功能尤为重要。通过合理管理和跟踪库存,企业可以实现不同仓库之间的库存调拨,优化运营成本,改善协同效率。本文将介绍如何使用PHP编写库存分仓管理功能的代码,并为您提供相关的代码示例。一、建立数据库在开始编写库存分仓管理功能的代码之

Java冒泡排序最简单的代码示例冒泡排序是一种常见的排序算法,它的基本思想是通过相邻元素的比较和交换来将待排序序列逐步调整为有序序列。下面是一个简单的Java代码示例,演示了如何实现冒泡排序:publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

《Go语言编程实例:Web开发中的代码示例》随着互联网的快速发展,Web开发已经成为各行业中必不可少的一部分。作为一门功能强大且性能优越的编程语言,Go语言在Web开发中越来越受到开发者们的青睐。本文将通过具体的代码示例,介绍如何利用Go语言进行Web开发,让读者能够更好地理解和运用Go语言来构建自己的Web应用。1.简单的HTTP服务器首先,让我们从一个

华为云边缘计算对接指南:Java代码示例快速实现接口随着物联网技术的快速发展和边缘计算的兴起,越来越多的企业开始关注边缘计算的应用。华为云提供了边缘计算服务,为企业提供了高可靠的计算资源和便捷的开发环境,使得边缘计算应用更加容易实现。本文将介绍如何通过Java代码快速实现华为云边缘计算的接口。首先,我们需要准备好开发环境。确保你已经安装了Java开发工具包(

一、Java文件操作基础在Java中,文件操作是一个基本且重要的功能。您可以使用Java类库中的File类和相关方法来创建、读取、写入和删除文件。File类提供了丰富的api,可以满足大多数的文件操作需求。创建文件Filefile=newFile("sample.txt");file.createNewFile();写入文件FileWriterwriter=newFileWriter(file);writer.write("Hello,World!");writer.close();读取文件Fi
