Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验: https://teojs.github.io/clipic/
https://github.com/teojs/clipic
参数说明
width:Number (默认:500) – 裁剪宽度
height:Number (默认:500) – 裁剪高度
ratio:Number (可选) – 裁剪的比例,当传入ratio时width/height将无效
src:String (必传) – 需要裁剪的图片,可以是图片链接,或者 base64
type:String (默认:jpeg) – 裁剪后图片的类型,仅支持 jpeg/png 两种
quality:Number (默认:0.9) – 压缩质量
buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本
http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0
你可以尝试使用以下方法来上传数字生命:1. 使用编辑软件,如 Photoshop、GIMP 或其他相关软件。将你要上传的数字生命转换成图像格式(如 JPEG、PNG 或 GIF),然后上传该图像。
2. 使用浏览器上传插件,如 Flash、HTML5 上传插件。
3. 使用数据库,如 Oracle、MySQL 等,可以将你要上传的数据存储在数据库中。
4. 使用数字生命模拟软件,例如小马科学家或其他类似软件,可以模拟数字生命的行为,然后将模拟结果上传。
html5uploader.js 兼容ie8方法如下:
拥有两个插件,一个是flash版本的uploadify,免费的。另一个是自己写的html5版本的,名叫html5uploader(好俗的名字。。),再加一个适配器uploadadapter,用来决定在什么时候调用哪个插件。页面中只调用uploadadapter。关键的难题就在于,页面中的代码是只写一次的,不管是flash的还是html5的都得能识别出页面上的参数,这也就是我的山寨版本的插件做的事情,原flash版本的配置参数通通得识别并有效。幸好,已经实现了。
上demo
很多东西,一上demo就都清楚了。。。
[html] view plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadadapter.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#upload').uploadadapter({
fileTypeExts:'*.jpg*.png',
auto:false,
showUploaded:true,
baseurl:'.',//当前目录
multi:true,
removeTimeout:9999999,
uploadurl:'upload.php'
})
})
</script>
</head>
<body>
<input type="file" name="file" id="upload" />
</body>
</html>
ie8下调用flash
firefox、chrome下调用html5
略有差异,ie8下圆角没了。。。如果不喜欢这个样式呢,就请打开css文件自己修改吧。
很简单的调用,可以看到在页面中使用的是uploadadapter,由它来决定调用哪个插件。俩个插件所需要的js文件和css文件都是异步引入的,此处用到一个小插件loadScript。参数没有写全,可以自己看源代码的注释~
uploadadapter中的调用情况是我需要的配置,你也可以随意修改。
四、相关文件注释
在此把文件夹中的文件做一个简要介绍:
/html5uploader html5上传插件,你也可以拿来单独使用
/uploadify3.2 flash上传插件,也可以拿来单独使用
/uploads 存放上传的文件
/jquery.loadScript.js 用于异步引入脚本的小插件
/jquery.uploadadapter.js 适配器,用来判断客户端类型,动态调用上传插件
/upload.php 后台处理程序,最基本的
五、上源码,注释很全哦
http://download.csdn.net/detail/never_say_goodbye/5090639六、一个bug!!
很重的哦,我之前给疏漏了,在这里说一下,文件就不重新上传了
在jquery.html5uploader.js的158和164行,将$('.uploadify-progress')改为$('#'+file.index).fnd('.uploadify-progress'),否则上传多个文件会混淆。