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>

链接: https://www.fly63.com/nav/1750