闻明远,不满裁判竖双指,亚运村图书大厦
@section styles{} @section scripts{ <script src="~/scripts/jquery-3.3.1.min.js"></script><script src="~/upload/js/fileinput.min.js"></script><script src="~/upload/js/locales/zh.js"></script>}
html部分
js部分有些属性被注释,根据需要添加
后台接受参数
public jsonresult test(int id) { var files = httpcontext.request.files["headportrait"]; files.saveas(@"f:\images\111.jpg"); return json(""); }
属性名 |
属性类型 |
描述说明 |
默认值 |
language |
string |
多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,中文zh,引入语言文件必须放在fileinput.js之后 |
'en' |
showcaption |
boolean |
是否显示被选文件的简介 |
true |
showbrowse |
boolean |
是否显示浏览按钮 |
true |
showpreview |
boolean |
是否显示预览区域 |
true |
showremove |
boolean |
是否显示移除按钮 |
true, |
showupload |
boolean |
是否显示上传按钮 |
true, |
showcancel |
boolean |
是否显示取消按钮 |
true, |
showclose: |
boolean |
是否显示关闭按钮 |
true |
showuploadedthumbs |
boolean |
true |
|
browseonzoneclick |
boolean |
false |
|
autoreplace |
boolean |
是否自动替换当前图片,设置为true时,再次选择文件, 会将当前的文件替换掉。 |
false |
generatefileid |
object |
null |
|
previewclass |
string |
添加预览按钮的类属性 |
‘’ |
captionclass |
string |
‘’ |
|
frameclass |
string |
'krajee-default' |
|
mainclass |
string |
'file-caption-main' |
|
maintemplate |
object |
null |
|
purifyhtml |
boolean |
true |
|
filesizegetter |
object |
null |
|
initialcaption |
string |
'' |
|
initialpreview |
array/object |
[] |
|
initialpreviewdelimiter |
string |
'*$$*' |
|
initialpreviewasdata |
boolean |
false |
|
initialpreviewfiletype |
string |
'image' |
|
initialpreviewconfig |
array/object |
[] |
|
initialpreviewthumbtags |
array/object |
[] |
|
previewthumbtags |
object |
{} |
|
initialpreviewshowdelete |
boolean |
true |
|
removefrompreviewonerror |
boolean |
false |
|
deleteurl |
string |
删除图片时的请求路径 |
'' |
deleteextradata |
object |
删除图片时额外传入的参数 |
{} |
overwriteinitial |
boolean |
true |
|
previewzoombuttonicons |
object |
{ prev: '', next: '', toggleheader: '', fullscreen: '', borderless: '', close: '' }, |
|
previewzoombuttonclasses |
object |
{ prev: 'btn btn-navigate', next: 'btn btn-navigate', toggleheader: 'btn btn-default btn-header-toggle', fullscreen: 'btn btn-default', borderless: 'btn btn-default', close: 'btn btn-default' }, |
|
prefericonicpreview |
boolrean |
false |
|
prefericoniczoompreview |
boolrean |
false |
|
allowedpreviewtypes |
undefined |
undefined |
|
allowedpreviewmimetypes |
object |
null |
|
allowedfiletypes |
object |
接收的文件后缀,如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型 |
null |
allowedfileextensions |
object |
null |
|
defaultpreviewcontent |
object |
null |
|
customlayouttags |
object |
{} |
|
custompreviewtags |
object |
{} |
|
previewfileicon |
string |
'' |
|
previewfileiconclass |
string |
'file-other-icon' |
|
previewfileiconsettings |
object |
{} |
|
previewfileextsettings |
object |
{} |
|
buttonlabelclass |
string |
'hidden-xs' |
|
browseicon |
string |
'' |
|
browseclass |
string |
'btn btn-primary' |
|
removeicon |
string |
'' |
|
removeclass |
string |
'btn btn-default' |
|
cancelicon |
string |
'' |
|
cancelclass |
string |
'btn btn-default' |
|
uploadicon |
string |
'' |
|
uploadclass |
string |
'btn btn-default' |
|
uploadurl |
string |
上传文件路径 |
null |
uploadasync |
boolean |
是否为异步上传 |
true |
uploadextradata |
上传文件时额外传递的参数设置 |
{} |
|
zoommodalheight |
number |
480 |
|
minimagewidth |
string |
图片的最小宽度 |
null |
minimageheight |
string |
图片的最小高度 |
null |
maximagewidth |
string |
图片的最大宽度 |
null |
maximageheight |
string |
图片的最大高度 |
null |
resizeimage |
boolean |
false |
|
resizepreference |
string |
'width' |
|
resizequality |
number |
0.92 |
|
resizedefaultimagetype |
string |
'image/jpeg' |
|
minfilesize |
number |
单位为kb,上传文件的最小大小值 |
0 |
maxfilesize |
number |
单位为kb,如果为0表示不限制文件大小 |
0 |
resizedefaultimagetype |
number |
25600(25mb) |
|
minfilecount |
number |
表示同时最小上传的文件个数 |
0 |
maxfilecount |
number |
表示允许同时上传的最大文件个数 |
0 |
validateinitialcount |
boolean |
false |
|
msgvalidationerrorclass |
string |
'text-danger' |
|
msgvalidationerroricon |
string |
' ' |
|
msgerrorclass |
string |
'file-error-message' |
|
progressthumbclass |
string |
"progress-bar progress-bar-success progress-bar-striped active" |
|
rogressclass |
string |
"progress-bar progress-bar-success progress-bar-striped active" |
|
progresscompleteclass |
string |
"progress-bar progress-bar-success" |
|
progresserrorclass |
string |
"progress-bar progress-bar-danger" |
|
progressuploadthreshold |
number |
99 |
|
previewfiletype |
string |
预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 |
'image' |
elcaptioncontainer |
string |
null |
|
elcaptiontext |
string |
设置标题栏提示信息 |
null |
elpreviewcontainer |
string |
null |
|
elpreviewimage |
string |
null |
|
elpreviewstatus |
string |
null |
|
elerrorcontainer |
string |
null |
|
errorclosebutton |
string |
'×' |
|
slugcallback |
function |
选择后未上传前 回调方法 |
null |
dropzoneenabled |
boolean |
是否显示拖拽区域 |
true |
dropzonetitleclass |
string |
拖拽区域类属性设置 |
'file-drop-zone-title' |
fileactionsettings |
object |
设置预览图片的显示样式 |
{ showremove: true, showupload: false, showzoom: true, showdrag: true, removeicon: '', removeclass: 'btn btn-xs btn-default', removetitle: 'remove file', uploadicon: '', uploadclass: 'btn btn-xs btn-default', uploadtitle: 'upload file', zoomicon: '', zoomclass: 'btn btn-xs btn-default', zoomtitle: 'view details', dragicon: '', dragclass: 'text-info', dragtitle: 'move / rearrange', dragsettings: {}, indicatornew: '', indicatorsuccess: '', indicatorerror: '', indicatorloading: '', indicatornewtitle: 'not uploaded yet', indicatorsuccesstitle: 'uploaded', indicatorerrortitle: 'upload error', indicatorloadingtitle: 'uploading ...' } |
otheractionbuttons |
string |
'' |
|
textencoding |
string |
编码设置 |
'utf-8' |
ajaxsettings |
object |
{} |
|
ajaxdeletesettings |
object |
{} |
|
showajaxerrordetails |
boolean |
true |
提示说明设置:
属性名 |
默认值 |
中文 |
filesingle |
file |
文件 |
fileplural |
files |
个文件 |
browselabel |
browse &hellip |
选择 … |
removelabel |
remove |
移除 |
removetitle |
clear selected files |
清除选中文件 |
cancellabel |
cancel |
取消 |
canceltitle |
abort ongoing upload |
取消进行中的上传 |
uploadlabel |
upload |
上传 |
uploadtitle |
upload selected files |
上传选中文件 |
msgno |
no |
没有 |
msgnofilesselected |
no files selected |
“” |
msgcancelled |
cancelled |
取消 |
msgzoommodalheading |
detailed preview |
详细预览 |
msgsizetoosmall |
file "{name}" ({size} kb) is too small and must be larger than {minsize} kb. |
file "{name}" ({size} kb) is too small and must be larger than {minsize} kb. |
msgsizetoolarge |
file "{name}" ({size} kb) exceeds maximum allowed upload size of {maxsize} kb. |
文件 "{name}" ({size} kb) 超过了允许大小 {maxsize} kb. |
msgfilestooless |
you must select at least {n} {files} to upload. |
你必须选择最少 {n} {files} 来上传. |
msgfilestoomany |
number of files selected for upload ({n}) exceeds maximum allowed limit of {m}. |
选择的上传文件个数 ({n}) 超出最大文件的限制个数 {m}. |
msgfilenotfound |
file "{name}" not found! |
文件 "{name}" 未找到! |
msgfilesecured |
security restrictions prevent reading the file "{name}". |
安全限制,为了防止读取文件 "{name}". |
msgfilenotreadable |
file "{name}" is not readable. |
文件 "{name}" 不可读. |
msgfilepreviewaborted |
file preview aborted for "{name}". |
取消 "{name}" 的预览. |
msgfilepreviewerror |
an error occurred while reading the file "{name}". |
读取 "{name}" 时出现了一个错误. |
msginvalidfilename |
invalid or unsupported characters in file name "{name}". |
invalid or unsupported characters in file name "{name}". |
msginvalidfiletype |
invalid type for file "{name}". only "{types}" files are supported. |
不正确的类型 "{name}". 只支持 "{types}" 类型的文件. |
msginvalidfileextension |
invalid extension for file "{name}". only "{extensions}" files are supported. |
不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名. |
msgfiletypes |
{ 'image': 'image', 'html': 'html', 'text': 'text', 'video': 'video', 'audio': 'audio', 'flash': 'flash', 'pdf': 'pdf', 'object': 'object' }, |
{ 'image': 'image', 'html': 'html', 'text': 'text', 'video': 'video', 'audio': 'audio', 'flash': 'flash', 'pdf': 'pdf', 'object': 'object' }, |
msguploadaborted |
the file upload was aborted |
该文件上传被中止 |
msguploadthreshold |
processing... |
processing... |
msguploadbegin |
initializing... |
initializing... |
msguploadend |
done |
done |
msguploadempty |
no valid data available for upload. |
no valid data available for upload. |
msgvalidationerror |
validation error |
验证错误 |
msgloading |
loading file {index} of {files} … |
加载第 {index} 文件 共 {files} … |
msgprogress |
loading file {index} of {files} - {name} - {percent}% completed. |
加载第 {index} 文件 共 {files} - {name} - {percent}% 完成. |
msgselected |
{n} {files} selected |
{n} {files} 选中 |
msgfoldersnotallowed |
drag & drop files only! {n} folder(s) dropped were skipped. |
只支持拖拽文件! 跳过 {n} 拖拽的文件夹. |
msgimagewidthsmall |
width of image file "{name}" must be at least {size} px. |
宽度的图像文件的"{name}"的必须是至少{size}像素. |
msgimageheightsmall |
height of image file "{name}" must be at least {size} px. |
图像文件的"{name}"的高度必须至少为{size}像素. |
msgimagewidthlarge |
width of image file "{name}" cannot exceed {size} px. |
宽度的图像文件"{name}"不能超过{size}像素. |
msgimageheightlarge |
height of image file "{name}" cannot exceed {size} px. |
图像文件"{name}"的高度不能超过{size}像素. |
msgimageresizeerror |
could not get the image dimensions to resize. |
无法获取的图像尺寸调整。 |
msgimageresizeexception |
error while resizing the image. {errors} |
错误而调整图像大小。 {errors} |
msgajaxerror |
something went wrong with the {operation} operation. please try again later! |
something went wrong with the {operation} operation. please try again later! |
msgajaxprogresserror |
{operation} failed |
{operation} failed |
ajaxoperations |
{ deletethumb: 'file delete', uploadthumb: 'file upload', uploadbatch: 'batch file upload', uploadextra: 'form data upload' }, |
{ deletethumb: 'file delete', uploadthumb: 'file upload', uploadbatch: 'batch file upload', uploadextra: 'form data upload' }, |
dropzonetitle |
drag & drop files here … |
拖拽文件到这里 … |
dropzoneclicktitle |
|
|
previewzoombuttontitles |
{ prev: 'view previous file', next: 'view next file', toggleheader: 'toggle header', fullscreen: 'toggle full screen', borderless: 'toggle borderless mode', close: 'close detailed preview' } |
{ prev: '预览上一个文件', next: '预览下一个文件', toggleheader: '缩放', fullscreen: '全屏', borderless: '无边界模式', close: '关闭当前预览' } |
fileactionsettings |
{ removetitle: '删除文件', uploadtitle: '上传文件', zoomtitle: '查看详情', dragtitle: '移动 / 重置', indicatornewtitle: '没有上传', indicatorsuccesstitle: '上传', indicatorerrortitle: '上传错误', indicatorloadingtitle: '上传 ...' }, |
method说明:
方法名 |
参数 |
描述 |
fileerror |
异步上传错误结果处理 $('#uploadfile').on('fileerror', function(event, data, msg) { }); |
|
fileuploaded |
异步上传成功结果处理 $("#uploadfile").on("fileuploaded", function (event, data, previewid, index) { }) |
|
filebatchuploaderror |
同步上传错误结果处理 $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) { }); |
|
filebatchuploadsuccess |
同步上传成功结果处理 $('#uploadfile').on('filepreupload', function(event, data, previewid, index) { }); |
|
filebatchselected |
选择文件后处理事件 $("#fileinput").on("filebatchselected", function(event, files) { }); |
|
upload |
文件上传方法 $("#fileinput").fileinput("upload"); |
|
fileuploaded |
上传成功后处理方法 $("#fileinput").on("fileuploaded", function(event, data, previewid, index) { }); |
|
filereset |
||
fileclear |
点击浏览框右上角x 清空文件前响应事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); |
|
filecleared |
点击浏览框右上角x 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); |
|
fileimageuploaded |
在预览框中图片已经完全加载完毕后回调的事件 |
常见错误:
(1) 当点击上传后,报错,提示你必须选择最少x个文件上传。
错误原因:html中input标签元素属性:data-min-file-count="2" 设置为x个文件,限制上传文件数。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论