rubaxa / fileapi

该包已被放弃且不再维护。没有建议的替代包。

FileAPI (多文件上传、图片上传、裁剪、缩放等) 的 jQuery 插件

维护者

详情

github.com/RubaXa/jquery.fileapi

主页

源代码

安装次数: 78,663

依赖者: 7

建议者: 0

安全: 0

星标: 859

关注者: 68

分支: 210

语言：JavaScript

0.4.11 2015-09-11 15:56 UTC

MIT 5fc1013e103bb0931f5fbd18f15a9194ddf573d4

  • Konstantin Lebedev <ibnRubaXa.woop@gmail.com>

jqueryuploadfile uploadfileapimultiupload

This package is not auto-updated.

Last update: 2022-02-01 12:37:04 UTC

README

警告：此插件不再维护

如果您有继续开发和支持的意愿，请发邮件给我，我将很乐意提供对仓库的访问权限。

注意：此插件不再维护

如果您有继续开发和支持的意愿，请发邮件给我，我将很乐意提供所有必要的访问权限。

$.fn.fileapi

FileAPI (FileAPI) 的 jQuery 插件（多文件上传、图片上传、裁剪、缩放等）

安装

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
	window.FileAPI = {
		  debug: false // debug mode
		, staticPath: '/js/jquery.fileapi/FileAPI/' // path to *.swf
	};
</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.exif.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>

示例

<div id="uploader">
	<div class="js-fileapi-wrapper">
		<input type="file" name="files[]" />
	</div>
	<div data-fileapi="active.show" class="progress">
		<div data-fileapi="progress" class="progress__bar"></div>
	</div>
</div>
<script>
	jQuery(function ($){
		$('#uploader').fileapi({
			url: './ctrl.php',
			autoUpload: true,
			accept: 'image/*',
			multiple: true,
			maxSize: FileAPI.MB*10 // max file size
		});
	});
</script>

选项

url:String

发送请求的 URL。
如果为 undefined 或空，则如果可用，将其设置为文件上传表单的动作属性。

autoUpload:Boolean

要启用自动上传，请将此选项设置为 true。

data:Object

可以使用此选项设置要随文件上传一起发送的附加表单数据。

headers:Object

附加请求头。

multiple:Boolean

指定是否可以一次选择多个文件，默认 true。

accept:String

如果类型属性的值为 file，则此属性指示服务器接受的文件类型；否则忽略。值必须是唯一的 MIME 类型规范的分号分隔列表：image/*、audio/*、video/* 等。

duplicate:Boolean

上传重复文件的能力，默认 false。

paramName:String

文件表单数据的参数名称（请求参数名称）。
如果为 undefined 或空，则使用文件输入字段的名称属性，或 files[] 如果文件输入名称属性也为空。

dataType:String

从服务器期望返回的数据类型，默认 json。

chunkSize:Number

块大小（字节），例如：.5 * FileAPI.MB。

chunkUploadRetry:Number

上传块时的重试次数。

maxSize:Number

允许的最大文件大小（字节），默认为无限制。

maxFiles:Number

此选项限制了使用此插件可以上传的文件数量。

imageSize:Object

允许上传的图片大小，例如：{ minWidth: 320, minHeight: 240, maxWidth: 3840, maxHeight: 2160 }。

sortFn:Function

所选文件的排序函数。

filterFn:Function

所选文件的筛选函数，例如：function (file, info){ return /^image/.test(file.type) && info.width > 320 }。

imageTransform:Object

客户端上修改原始图像的规则（见详情）。

imageTransform: {
	// resize by max side
	maxWidth: 800,
	maxHeight: 600
}

imageOriginal:Boolean

如果定义了imageTransform选项，则是否将原始图像发送到服务器。

elements:Object

// Default options
elements: {
	// Controls
	ctrl: {
		upload: '[data-fileapi="ctrl.upload"]',
		reset: '[data-fileapi="ctrl.reset"]',
		abort: '[data-fileapi="ctrl.abort"]'
	},
	// Display element depending on files
	empty: {
		show: '[data-fileapi="empty.show"]',
		hide: '[data-fileapi="empty.hide"]'
	},
	// Display element depending on queue state
	emptyQueue: {
		show: '[data-fileapi="emptyQueue.show"]',
		hide: '[data-fileapi="emptyQueue.hide"]'
	},
	// Display element depending on upload state
	active: {
		show: '[data-fileapi="active.show"]',
		hide: '[data-fileapi="active.hide"]'
	},
	// Preview file (single upload)
	preview: {
		el: 0, // css selector
		width: 0,
		height: 0,
		keepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally
	},
	// Total size of queue
	size: '[data-fileapi="size"]',
	// Selected file name
	name: '[data-fileapi="name"]',
	// Progress bar total
	progress: '[data-fileapi="progress"]',
	// Filelist options
	file: {
		// Template
		tpl: '[data-fileapi="file.tpl"]',
		// Progress bar
		progress: '[data-fileapi="file.progress"]',
		// Display element depending on upload state
		active: {
			show: '[data-fileapi="active.show"]',
			hide: '[data-fileapi="active.hide"]'
		},
		// Preview file or icon
		preview: {
			el: 0, // css selector
			get: 0, // eg: function($el, file){ $el.append('<i class="icon icon_'+file.name.split('.').pop()+'"></i>'); }
			width: 0,
			height: 0,
			keepAspectRatio: false // optional: false to stretch cropped image to preview area, true scale image proportionally
		}
	},
	// Drag and drop
	dnd: {
		// DropZone: selector or element
		el: '[data-fileapi="dnd"]',
		// Hover class
		hover: 'dnd_hover'
	}
}

事件

onSelect:Function(evt:$.Event, data:FilesObject)

检索文件列表，接受两个参数。

$('...').fileapi({
	onSelect: function (evt, data){
		data.all; // All files
		data.files; // Correct files
		if( data.other.length ){
			// errors
			var errors = data.other[0].errors;
			if( errors ){
				errors.maxSize; // File size exceeds the maximum size `@see maxSize`
				errors.maxFiles; // Number of files selected exceeds the maximum `@see maxFiles`
				errors.minWidth; // Width of the image is smaller than the specified `@see imageSize`
				errors.minHeight;
				errors.maxWidth; // Width of the image greater than the specified `@see imageSize`
				errors.maxHeight;
			}
		}
	}
});

onBeforeUpload:Function(evt:$.Event, uiEvt:Object)

开始上传之前。

function (evt, uiEvt){
	var files = uiEvt.files;
	var widget = uiEvt.widget;
	if (files.length > 1000) {
	   return false; // prevent uploading
	}
}

onUpload:Function(evt:$.Event, uiEvt:Object)

开始上传。

function (evt, uiEvt){
	// Base properties
	var file = uiEvt.file;
	var files = uiEvt.files;
	var widget = uiEvt.widget;
	var xhr = uiEvt.xhr;
}

onFilePrepare:Function(evt:$.Event, uiEvt:Object)

上传前准备数据。

function (evt, uiEvt){
	var file = uiEvt.file;
	uiEvt.options.data.fileType = file.type;
}

onFileUpload:Function(evt:$.Event, uiEvt:Object)

开始上传相同的文件。

onProgress:Function(evt:$.Event, uiEvt:Object)

常见的上传进度。

function (evt, uiEvt){
	var part = uiEvt.loaded / uiEvt.total;
}

onFileProgress:Function(evt:$.Event, uiEvt:Object)

上传相同文件的进度。

function (evt, uiEvt){
	var file = uiEvt.file;
	var part = uiEvt.loaded / uiEvt.total;
}

onComplete:Function(evt:$.Event, uiEvt:Object)

整个上传完成。

onFileComplete:Function(evt:$.Event, uiEvt:Object)

文件上传完成。

function (evt, uiEvt){
	var error = uiEvt.error;
	var result = uiEvt.result; // server response
}

onDrop:Function(evt:$.Event, data:FilesObject)

检索文件列表，接受两个参数。

onDropHover:Function(evt:$.Event, uiEvt:Object)

$('#box').fileapi({
	onDropHover: function (evt, uiEvt){
		$(this).toggleClass('dnd_hover', uiEvt.state);
	}
});

onFileRemove(evt:$.Event, file:File)

从队列中移除文件

function (evt, file){
	if( !confirm('Remove "'+file.name+'"?') ){
		return false;
	}
}

onFileRemoveCompleted(evt:$.Event, file:File)

从队列中移除文件

function (evt, file){
	// Send ajax-request
	$.post('/remove-ctrl.php', { uid: FileAPI.uid(file) });
}

Cropper

基于 Jсrop.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.FileAPI = { /* options */ };</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jquery.fileapi/jcrop/jquery.Jcrop.min.js"></script>
<link href="/js/jquery.fileapi/jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css"/>

用法

$('#userpic').fileapi({
	url: '...',
	accept: 'image/*',
	onSelect: function (imageFile){
		$('#userpic-upload-btn')
			.unbind('.fileapi')
			.bind('click.fileapi', function (){
				$('#userpic').fileapi('upload');
			})
		;

		$('#image-preview').cropper({
			  file: imageFile
			, bgColor: '#fff'
			, maxSize: [320, 240] // viewport max size
			, minSize: [100, 100] // crop min size
			, aspectRatio: 1      // optional, aspect ratio: 0 - disable, >0 - fixed, remove this option: autocalculation from minSize
			, onSelect: function (coords){
				$('#userpic').fileapi('crop', imageFile, coords);
			}
		});
	}
});

自定义

$('#upload').fileapi({
	multiple: true,

	// Restores the list of files uploaded earlier *** IE < 9 — NOT SUPPORTED ***
	files: [{
		src: "http://path/to/filename.png",
		type: "image/png",
		name: "filename.png",
		size: 31409,
		data: { id: 999, token: "..." }
	}],

	// Remove a file from the upload queue
	onFileRemove: function (evt, file){
		if( !confirm("Are you sure?") ){
			// Cancel remove
			evt.preventDefault();
		}
	},

	onFileComplete: function (evt, uiEvt){
		var file = uiEvt.file;
		var json = uiEvt.result;

		file.data = {
			id: json.id,
			token: json.token
		};
	},

	onFileRemoveCompleted: function (evt, file){
		evt.preventDefault();

		file.$el
			.attr('disabled', true)
			.addClass('my_disabled')
		;

		new ModalConfirm('Delete "'+file.name+'"?')
			.then(function (){
				$.post('/api/remove', file.data);

				$('#upload').fileapi("remove", file);
				// or so
				evt.widget.remove(file);
			}, function (){
				file.$el
					.attr('disabled', false)
					.removeClass('my_disabled')
				;
			})
		;
	}

})

与Bootstrap一起使用

您可以在不添加太多额外CSS的情况下使用此上传器与Bootstrap框架。只需将以下CSS添加到您的页面中，以隐藏浏览器的“浏览”按钮

#id-of-uploader .btn {
	cursor: pointer;
	display: inline-block;
	position: relative;
	overflow: hidden;
}

#id-of-uploader .btn input {
	top: -10px;
	right: -40px;
	z-index: 2;
	position: absolute;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	font-size: 50px;
}

MIT许可证

版权所有2013年Lebedev Konstantin [email protected] http://rubaxa.github.io/jquery.fileapi/

特此授予任何获取此软件及其相关文档文件（以下简称“软件”）副本的任何人，免费使用该软件的权利，不受任何限制，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许向软件提供的人这样做，前提是遵守以下条件

上述版权声明和本许可声明应包含在软件的所有副本或主要部分中。

软件按“原样”提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性保证。在任何情况下，作者或版权所有者均不对任何索赔、损害或其他责任承担责任，无论是在合同、侵权或其他行为中产生的，与软件或其使用或其它方式有关。

变更日志

0.4.6

  • FileAPI 2.0.9之前
  • #12: onRemoveCompleted -> onFileRemoveCompleted
  • #100: fixed maxSize option

0.4.5

  • #95: fixed rotate method
  • #94: fixed redraw method

0.4.4

  • #93: files option and userpic
  • #90: fixed rotate + imageAutoOrientation

0.4.3

  • #84: fixed modal.js
  • #82: clear(all: true)
  • #61: always parse result (dataType === 'json')

0.4.2

  • #73: git -> gif (fixed typo)

0.4.1

  • #67: resize method
  • #63: remove method
    • console.log
  • modal close

0.4.0

  • #57: + onBeforeUpload event
  • support disabled dom-attribute
  • #34: fixed imageTransform
    • FileAPI v2.0.3
  • #35: + imageOriginal option

0.3.1

  • fixed crop method
    • onFilePrepare event

0.3.0

    • QUnit tests
    • onFileRemove and onRemoveCompleted events
    • abort(text) method
    • remove(file) method
  • fixed serialize() method

0.2.0

  • enhancement ui event in onSelect
    • maxFiles option support
  • 固定 onFileUpload 和 onFileProgress 事件
    • #9: 保持宽高比预览（可选）

0.1.4

    • headers: 对象
    • queue()； * clear()；
  • clearOnComplete: false
    • resetOnSelect -> clearOnSelect

0.1.1

    • resetOnSelect 选项，默认 !multiple
  • 修复 $.fn.cropper 重置

0.1.0

  • 初始提交

Bitdeli Badge