file Input官方文檔 中文翻譯
file input 特性
1、這個插件會把簡單的html文件變成一個更好用的文件選擇輸入控件,通過一個html的文件輸入框,能兼容那些不支持jquery或js的瀏覽器。
2、fileinput 插件包括options,templates等三個部分來控制展示
。文件標題部分:用來展示選中的文件的簡介信息
。文件按鈕行為部分:用來瀏覽,移除和上傳文件
。文件預覽部分:用來將展示選中的文件到客戶端實現預覽(支持圖片, 文檔, flash, 和視頻類型),別的文件類型將以宿略圖的形式預覽
3、如果你設置了class=file,這個插件就會自動把type為file的input框轉換成一個文件選擇輸入框,input框的所有選項可以通過html5的data屬性來實現。
4、能夠選擇和預覽多個文件,使用html5 文件閱讀api來讀取和預覽文件。如果很多文件被選到了,會展示文件正在被加載到預覽區的過程。
5、提供可以根據你對fileinput不同的展示需求,而改變的預定義tmplate和css 類。
6、能夠配置這個插件來初始化帶有標題的預覽圖(對更新記錄的場景最有用)。插件選項部分的initialPreview,initialPreviewConfig,和initialCaption這三個屬性來配置這個功能。
7、能夠把內容凸顯出來作為一個預覽,可以看到幻燈片縮放預覽效果和最大限度放大或者全屏預覽。
8、通過拖拽來排序/重新安排初始化的預覽內容。
9、能夠完全控制擺放組件,可以控制樣式和布局。
10、通過 locales/translations.來支持在相同的頁面使用多種語言組件。
11、顯示或者隱藏一些或者全部的以下選項:
。標題部分
。預覽部分
。上傳部分
。移除部分
12、定制目標容器元素的展示位置來顯示 標題容器,標題文字,預覽容器,預覽圖片,預覽狀態插件。
13、對於text文件預覽,會自動用縮略圖來包裹,當觸發onhover事件時會將一個用於完全展示內容指示鏈接展示出來。
14、定制預覽,加載過程,和文件選擇的信息。
15、上傳路徑默認指向form的submit事件,支持ajax上傳傳遞參數。
16、開發了更先進的jquery觸發事件。目前能使用的事件有,filereset
, fileclear
, filecleared
, fileloaded
, 和 fileerror。
17、支持readonly和disabled屬性。
18、對超過它的容器寬度的文件標題,動態的分配大小。
19、增強fileimageuploaded
事件,使圖片完全加載到預覽區之后還能被移除。
20、當圖片大小超過預覽區的寬度時,自動調整預覽圖片大小。
21、完全模塊化,具有可擴展型,允許開發者根據自己需求來配置file-input插件。
22、根據不同的預覽類型智能預覽,內置文件類型分類有:image
, text
, html
, video
, audio
, flash
,object
, 和其他.
23、allowedPreviewTypes:你可以配置所有被允許展示在預覽區的文件類型,這些默認是['image', 'html', 'text', 'video', 'audio', 'flash', 'object'],因此所有的文件類型被看成一個對象。例如:只展示image和video,你可以這樣設置['image', 'video']。要想使內容預覽變得不可用只顯示預覽icon而不是縮略圖,你可以把這個屬性設置為null,空值,或者false。
24、allowedPreviewMimeTypes:除了allowedPreviewTypes,你還可以控制所有的mime類型(ajax中的contenttype)是否展示預覽,這個默認值是null,意味着所有的mime類型會被展示出來,>注意:使用2.5.0 版本的,你可以通過設置allowedFileTypes
和 allowedFileExtensions來
控制哪種文件類型或文件擴展可以被展示。
25、layoutTemplates:允許你通過一個屬性配置所有的布局模板。布局對象可以配置為:main1
, main2
,preview
, caption
, 和 modal
26、previewTemplates:所有的為每種類型配置的模板都被整合到一個屬性里,而不是把image,text等分開配置模板。key值是設置在allowedPreviewTypes
的各種格式,value是用於預覽的模板。對於每個預覽文件類型(generic
, image
, text
, html
, video
, audio
, flash
, object
, 和 other
)都有默認的預編輯模板,通用模板使用指令標志僅用於顯示initialPreview
內容。
27、previewSettings:允許你給每個預覽圖片類型配置寬度和高度,這個插件為每個文件類型(image
, text
, html
, video
, audio
, flash
, 和 object
)設置了預定義的高度和寬度。
28、fileTypeSettings:允許你給每個預覽圖片類型調用一個回調方法來配置和改變它,這個插件有默認的回調方法來識別每種文件類型(image
, text
, html
, video
, audio
, flash
, 和 object
)。
29、增強使用模板代替標簽的功能,使用這個版本,將會代替模板string來自動檢查標簽的多個事件。
30、通過返回輸出來控制事件,在任何事件里增加自定義校驗來阻止上傳。
31、翻譯和區域設置的支持
注意:flash預覽功能需要安裝Shockwave flash插件並且被客戶端瀏覽器支持。flash預覽功能目前只能成功在webkit 內核的瀏覽器中工作。video或者audio格式的被支持html5的現代瀏覽器支持。要注意瀏覽器有對video、audio格式(mp4,webm,ogg,mp3,wav)的標簽數量進行限制。video文件的大小推薦使用小的,(可以通過maxFileSize屬性來控制),以至於不影響預覽效果。
File Upload 特點