fileinput显示服务器文件,bootstrap3 文件上传插件fileinput中文说明文档(中)

initialPreview: array, the list of image

files or any HTML markup to point to your uploaded files. If this

property is set, the plugin will automatically replace the files

dynamically in the preview content after upload success. The

configuration for this is similar to theinitialPreview

option setting. For example:

initialPreview:数组,一些列的图片文件或者HTML标记来指出你上传成功了的文件。如果该属性不为空,该插件会在上传成功之后自动的替换那些文件的动态预览。该配置很像initialPreview

option setting 举个例子a4c26d1e5885305701be709a3d33442f.png

initialPreviewConfig:array, the

configuration to identify properties for each file markup

ininitialPreviewitem (that is setup as part

ofinitialPreview). If this

property is set, the plugin will automatically replace the files

dynamically in the preview content after upload success. The

configuration for this is similar to

theinitialPreviewConfig

option setting. For

example:

initialPreviewConfig:数组,这个配置用来识别initialPreview项目中每个文件标记的属性。如果这个字段不为空,该插件会自动的在文件上传成功后动态的替换预览图内容。该配置很像initialPreviewConfig

option setting 举个例子a4c26d1e5885305701be709a3d33442f.png

initialPreviewThumbTags:array, an array of

objects corresponding to replacing tags within each initial preview

thumbnail. The initial preview thumbnails set

viainitialPreviewwill read this configuration for

replacing tags.

initialPreviewThumbTags:数组,一个关于初始化预览图中缩略图标签的对象的数组。由initialPreview定义的初始化预览图的缩略图将会读取这个配置来替换标签a4c26d1e5885305701be709a3d33442f.png

append: boolean, whether to append the

content to the initialPreview if you already set an initialPreview

on INIT. If not set this defaults totrue. If set

to false, the plugin

will overwrite the initialPreview content.

append:布尔值,如果你在INIT已经设置了一个initialPreview,是否向initialPreview

中追加内容。该属性的默认值为true。如果把它设为false 那么该插件会覆盖原来的initialPreview

内容。

For example the response from server would be sent

as {error: 'You have faced

errors in 4 files.', errorkeys: [0, 3, 4,

5]}. Note: The plugin will

automatically validate and display ajax exception errors.

举个例子,服务器的响应可以像这样:{error:

'You have faced errors in 4 files.', errorkeys: [0, 3, 4,

5]} 注意,该插件会自动的检验和显示ajax异常信息。

IMPORTANT

You MUST send a

valid JSON response from your server, else the upload process will

fail. Even if you do not encounter any error, you must at least

send an empty JSON object {} from your server.

你的服务器端必须返回一个有效的JSON响应,否则即使你没有碰到任何问题,该插件也会提示你上传失败,你至少要从服务器发送一个空JSON

数据如{}。

To trap and

display a validation error, your JSON response data must include

the error key, whose value will be the error

HTML markup to display. In addition, you must typically also send

the errorkeys for synchronous mode to

identify the keys for files which faced errors. This is to be setup

as mentioned above.

为了捕获和显示一个确定的错误,你的JSON响应必须包含一个error字段,其值应该是用来显示的HTML格式的报错信息。另外在同步模式中你必须发送errorkeys 字段来区分到底哪个文件遇到了异常。这个可以像上面提过的一样来设置

You can also send

in additional keys or data with your JSON response, for you to

process them for advanced cases using events likefilebatchuploadsuccess.

你也可以在你的JSON响应中发送额外的键值对,而且你还可以通过使用filebatchuploadsuccess这类事件来处理这些你自己定义的数据

Options 附加选项

The

plugin supports these following options:

该插件支持如下的附加选项

language 多语言

string, language

configuration for the plugin to enable the plugin to display

messages for your locale (you must set the ISO code for the

language). You can have multiple language widgets on the same page.

The locale JS file for the language code must be defined as

mentioned in the translations section. The file must be loaded

after fileinput.js.

字符串,一项使该插件为你当地显示相应消息的配置(你必须为你的语言设置ISO码,如zh,en)。你可以在同一个页面上配置多种语言。本地的语言码JS文件必须按照上面多语言章节进行定义,该文件会在fileinput.js 加载完之后开始加载。

theme 主题

string, theme to

use for the plugin (will default to the inbuilt theme if not set).

With release v4.3.2, the fileinput plugin supports advanced theming

and ability to have separate themes for multiple widgets on the

same page. To do this, follow these simple steps:

字符串,是该插件使用的主题(默认是内置主题)。在4.3.2版本中,该插件支持更先进的主题并且能够为同一页面的多个控件设置不同的主题

Load respective

theme JS file(s) that you need (e.g. themes/fa/fa.js for Font Awesome theme).

The theme file(s) must be loaded after thefileinput.js.

根据你的需要加载每个JS各自的主题(如Font

Awesome的主题配置 themes/fa/fa.js)。主题文件必须在fileinput.js 加载完毕之后再加载。

Set

the theme property in the plugin to the

theme you need and which you have setup in your theme configuration

JS file above (e.g. 'fa').

用上面提到的已经在你的主题配置文件中配置好的JS文件,在该插件中设置theme属性为你需要的主题

The plugin will

automatically read the theme configuration for the theme name

from $fileinputThemes[''] from the JS file

(e.g. via$fileinputThemes['']).

该插件会自动的根据$fileinputThemes[''] 标注的主题文件名字去从JS文件读取相应的主题配置文件

The plugin will

automatically also prepend the CSS

selector theme- to the file input container, so

that you can override your styles. The CSS for such themes can be

submitted by community in themes/THEME_NAME folder of the

repo.

该插件也会自动的在文件上传容器中伪装CSS选择器theme-,所以你可以覆盖你的风格。这些CSS主题会被社区提交到代码库的themes/THEME_NAME 文件夹。

You can

additionally load any theme specific CSS files if needed.

如果需要,你可以额外添加任何特定主题CSS文件

Note

Currently the plugin includes the Font Awesome and Glyphicons

themes. More advanced themes may be added in future or can be

contributed here by the community.

目前,该插件包含了 Font Awesome

和Glyphicons

的主题,更多先进的会在以后加入,或者会被社区所贡献。

showCaption

boolean whether to display the file caption.

Defaults to true.

showPreview

boolean whether to display the file preview.

Defaults to true.

showRemove

boolean whether to display the file remove/clear

button. Defaults to true.

showUpload

boolean whether to display the file upload button.

Defaults to true. This will

default to a form submit button, unless the uploadUrl is

specified.

showCancel

boolean whether to display the file upload cancel

button. Defaults to true. This will

be only enabled and displayed when an AJAX upload is in

process.

showClose

boolean whether to display the close icon in the

preview. Defaults to `true`. This will be only parsed

when showPreview is true or when you are

using the{close} tag in your preview

templates.

showUploadedThumbs

boolean whether to persist display of the uploaded

file thumbnails in the preview window (for ajax uploads) until the

remove/clear button is pressed. Defaults

to true. When set

to false, a next

batch of files selected for upload will clear these thumbnails from

preview.

showBrowse

boolean whether to display the file browse button.

Defaults to true.

browseOnZoneClick

boolean whether to enable file browse/select on

clicking of the preview zone. Defaults

to false.

autoReplace

boolean whether to automatically replace the files

in the preview after the maxFileCount limit is reached and a new

set of file(s) is/are selected. This will only work if a

valid maxFileCount is set. Defaults

to false.

captionClass

string, any

additional CSS class to append to the caption container.

previewClass

string, any

additional CSS class to append to the preview container.

mainClass

string, any

additional CSS class to append to the main plugin container that

will render the caption and the browse, remove, and upload buttons.

Defaults to file-caption-main.

purifyHtml

boolean, whether

to purify HTML content displayed for HTML content type in preview.

Defaults to true. This

functionality will need the

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 和大小、格式等功能,你会怎么实现呢? 对于Bootstrap上传文件插件fileinput,我们可以使用前端框架来实现多文件上传、预览、删除以及限制最大上传数量和大小、格式等功能。具体实现如下: 1. 在HTML页面引入fileinput插件的CSS和JS文件。 2. 创建一个input标签,并给它添加class为"file",然后给这个标签添加data属性,用来设置fileinput的一些参数。 3. 在JS文件,初始化fileinput插件,设置参数,例如设置最大上传数量、大小、格式等,以及预览和删除功能的相关操作。 4. 最后,将fileinput插件渲染到HTML页面即可。 这样,我们就可以很方便地实现Bootstrap上传文件插件fileinput的多文件上传、预览、删除以及限制最大上传数量和大小、格式等功能。 ### 回答2: Bootstrap上传文件插件fileinput可以通过设置参数实现多文件上传、预览、删除以及限制最大上传数量。 首先,在使用fileinput插件时,需要设置`showUpload`参数为`true`,以显示上传按钮。 其次,设置`uploadUrl`参数为服务器上的上传文件处理程序的URL,用于实际处理上传文件的操作。 然后,设置`maxFileCount`参数来限制最大上传数量。例如,若需要限制最大上传数量为3,可以设置`maxFileCount`为3。 在HTML代码,需要添加一个`<input>`标签,设置其`id`属性,并与插件进行绑定。例如,`<input id="myFileinput" type="file" name="file" multiple>`。 接下来,在JavaScript代码,可以使用`$('#myFileinput').fileinput()`来初始化fileinput插件。 为了实现文件上传预览的功能,可以设置`showPreview`参数为`true`。这将在选择文件显示文件的缩略图预览。 针对删除文件的功能,可以设置`showRemove`参数为`true`。这将在文件缩略图上显示一个删除按钮,点击该按钮即可删除对应的文件。 通过以上设置和参数,Bootstrap上传文件插件fileinput可以实现多文件上传、预览、删除以及限制最大上传数量的功能。 ### 回答3: Bootstrap是一个流行的前端开发框架,其提供了丰富的插件供开发人员使用。其一个常用的插件fileinput,它可以方便地实现多文件上传、预览、删除以及限制最大上传数量的功能。 fileinput插件基于HTML5的File API,可以通过一个简单的配置实现多文件上传。首先,我们需要在HTML文件引入必要的JS和CSS文件,然后使用Bootstrap的表单组件来创建一个用于上传文件的表单项。 在JS文件,我们可以使用fileinput的初始化函数来配置插件的参数。通过设置maxFileCount参数,我们可以限制用户一次上传的最大文件数量。另外,通过设置showPreview参数为true,可以让插件在上传过程实时显示文件的预览图像。 为了实现文件的删除功能,我们可以使用fileinput提供的deleteUrl参数,将上传成功的文件的唯一标识(比如文件名或ID)传递给服务器端进行删除操作。如果不需要预览图像,我们可以将showPreview参数设为false,这样插件将不会显示上传的文件预览图像。 总之,通过使用Bootstrap上传文件插件fileinput,我们可以方便地实现多文件上传、预览、删除以及限制最大上传数量的功能。只需简单的配置,就可以满足用户的需求。同时,插件提供了良好的交互和视觉效果,使文件上传操作更加友好和便捷。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值