FileAPI 介绍
FileAPI是一组庞大的JavaScript工具,几乎任何相关文件都可以处理。它提供了文件上传(单一/多个)的功能并支持拖放操作、图像 裁剪、调整大小、套用筛选、获取文件信息等等。该工具是独立的,并配有PHP类可处理服务器端的操作。此外,如果浏览器不支持JavaScript文件上 传和摄像头,它将自动退回到Flash模式,并且详细地记录下来
使用
<div>
<!-- "js-fileapi-wrapper" -- required class -->
<div class="js-fileapi-wrapper upload-btn">
<div class="upload-btn__txt">Choose files</div>
<input id="choose" name="files" type="file" multiple />
</div>
<div id="images"><!-- previews --></div>
</div>
<script>window.FileAPI = { staticPath: '/js/FileAPI/dist/' };</script>
<script src="/js/FileAPI/dist/FileAPI.min.js"></script>
<script>
var choose = document.getElementById('choose');
FileAPI.event.on(choose,'change',function (evt){
var files = FileAPI.getFiles(evt); // Retrieve file list
FileAPI.filterFiles(files,function (file,info/**Object*/){
if( /^image/.test(file.type) ){
return info.width >= 320 && info.height >= 240;
}
return false;
},function (files/**Array*/,rejected/**Array*/){
if( files.length ){
// Make preview 100x100
FileAPI.each(files,function (file){
FileAPI.Image(file).preview(100).get(function (err,img){
images.appendChild(img);
});
});
// Uploading Files
FileAPI.upload({
url: './ctrl.PHP',
files: { images: files },
progress: function (evt){ /* ... */ },
complete: function (err,xhr){ /* ... */ }
});
}
});
});
</script>
GitHub:https://github.com/mailru/FileAPI
FileAPI
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。