使用 fileinput插件上传图片

加载脚本

@section Styles{  
<link href="~/upload/css/fileinput.min.css" rel="stylesheet" />
<link href="~/upload/themes/explorer/theme.min.css" rel="stylesheet" />
  }

@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部分

<input type="file" name="txt_file" id="HeadPortrait" class="file-loading"  multiple />
<input type="button" value="提交" id="save" class="btn btn-primary"/>

js部分有些属性被注释，根据需要添加

 <script>   
        $(function () {
            //0.初始化fileinput        
            var oFileInput = new FileInput();
            oFileInput.Init("HeadPortrait", "/Test/upfile");

            有自定义的按钮触发上传
            $("#save").click(function () {              
                var img = $("#HeadPortrait").val()      
                var picturename = img.substring($("#HeadPortrait").val().indexOf('.'), 
                $("#HeadPortrait").val().length).toUpperCase();     
                 //判断是否符合指定的格式
                if (picturename ==".JPG" || picturename == ".PNG" || picturename == 
                ".JPEG"||picturename == ".GIF") {
                      //增加肖像的上传处理
                initPortrait("HeadPortrait",id);//使用写入的ID进行更新
                $('#HeadPortrait').fileinput('upload'); //触发插件开始上传。
                     }
            })
        })   
       var FileInput = function () {
            var oFile = new Object();
            //初始化fileinput控件（第一次初始化）
            oFile.Init = function (ctrlName, uploadUrl) {
                var control = $('#' + ctrlName);
                //初始化上传控件的样式
                control.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['jpg', 'gif', 'png',"jpeg"],//接收的文件后缀                  
                    showCaption: true,//是否显示标题
                    browseClass: "btn btn-primary", //按钮样式     
                    showPreview: true,//是否显示预览
                    layoutTemplates: {
                        // actionDelete:'', //去除上传预览的缩略图中的删除图标
                        actionUpload: '',//去除上传预览缩略图中的上传图片；
                        actionZoom: '',   //去除上传预览缩略图中的查看详情预览的缩略图标。
                        footer: '<div class="file-thumbnail-footer">\n' +
                        '<div class="file-caption-name" style="width:{width}">{caption}</div>\n' +
                          '{progress} {actions}\n' +
                         '</div>',
                    },
                    //overwriteInitial: false,
                    //previewFileIcon: '<i class="fa fa-file"></i>',
                    dropZoneEnabled: false,//是否显示拖拽区域
                    //minImageWidth: 50, //图片的最小宽度
                    //minImageHeight: 50,//图片的最小高度
                    //maxImageWidth: 350,//图片的最大宽度
                    //maxImageHeight: 350,//图片的最大高度
                      maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                    //minFileCount: 0,                
                    //showUpload: true, //是否显示上传按钮
                    //showRemove: false, //不显示移除按钮
                    //showBrowse: shwoKey,//是否显示选择按钮
                    showCaption: true,//是否显示选择输入框
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    previewFileIcon :true,//是否显示文件icon 默认图片是直接显示缩略图 文件会展示相关内容         
                    preferIconicPreview: true,//是否强制相关文件展示icon
                    initialPreviewAsData: true,
                    //previewFileIconSettings: {}//配置相关文件展示的icon
                    //fileActionSettings: {
                    //    showZoom: true,
                    //    showDrag: false,
                    //    showRemove: false,
                    //    showUpload: false
                    //}
                    //uploadExtraData: function(previewId, index) {   //额外参数的关键点
                    //    //index = 2;
                    // }
                });
                //导入文件上传完成之后的事件   这个方法注册上传完成后的回调事件。也就是后天处理上传的文件之后进入这个方法
                $("#HeadPortrait").on("fileuploaded", function (event, data, previewId, index) {
                    if (data.response) {//没试过
                        alert('处理成功!');
                    }                  
                });
            }
            return oFile;
        };

 function initPortrait(ctrlName, id) {
            var control = $('#' + ctrlName);
            var imageurl = '/BosomFriend/Test?id=' + id + '&r=' + Math.random();
            //重要，需要更新控件的附加参数内容，以及图片初始化显示
            control.fileinput('refresh', {
                uploadExtraData: { id: id },
                initialPreview: [ //预览图片的设置
                "<img src='" + imageurl + "' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
                ],
            });
    </script>

后台接受参数

   public JsonResult Test(int id) {
            var Files = HttpContext.Request.Files["HeadPortrait"];
            Files.SaveAs(@"F:\Images\111.jpg");
            return Json("");
        }

Options 说明：

属性名	属性类型	描述说明	默认值
language	String	多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后扫描二维码关注公众号，回复： 3407188 查看本文章	'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: '<i class="glyphicon glyphicon-triangle-left"></i>', next: '<i class="glyphicon glyphicon-triangle-right"></i>', toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>', fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>', borderless: '<i class="glyphicon glyphicon-resize-full"></i>', close: '<i class="glyphicon glyphicon-remove"></i>' },
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		'<i class="glyphicon glyphicon-file"></i>'
previewFileIconClass	String		'file-other-icon'
previewFileIconSettings	Object		{}
previewFileExtSettings	Object		{}
buttonLabelClass	String		'hidden-xs'
browseIcon	String		'<i class="glyphicon glyphicon-folder-open"></i> '
browseClass	String		'btn btn-primary'
removeIcon	String		'<i class="glyphicon glyphicon-trash"></i>'
removeClass	String		'btn btn-default'
cancelIcon	String		'<i class="glyphicon glyphicon-ban-circle"></i>'
cancelClass	String		'btn btn-default'
uploadIcon	String		'<i class="glyphicon glyphicon-upload"></i>'
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		'<i class="glyphicon glyphicon-exclamation-sign"></i> '
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		'<span class="close kv-error-close">×</span>'
slugCallback	function	选择后未上传前回调方法	null
dropZoneEnabled	boolean	是否显示拖拽区域	true
dropZoneTitleClass	String	拖拽区域类属性设置	'file-drop-zone-title'
fileActionSettings	Object	设置预览图片的显示样式	{ showRemove: true, showUpload: false, showZoom: true, showDrag: true, removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>', removeClass: 'btn btn-xs btn-default', removeTitle: 'Remove file', uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>', uploadClass: 'btn btn-xs btn-default', uploadTitle: 'Upload file', zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>', zoomClass: 'btn btn-xs btn-default', zoomTitle: 'View Details', dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>', dragClass: 'text-info', dragTitle: 'Move / Rearrange', dragSettings: {}, indicatorNew: '<i class="glyphicon glyphicon-hand-down text-warning"></i>', indicatorSuccess: '<i class="glyphicon glyphicon-ok-sign text-success"></i>', indicatorError: '<i class="glyphicon glyphicon-exclamation-sign text-danger"></i>', indicatorLoading: '<i class="glyphicon glyphicon-hand-up text-muted"></i>', 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}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.	File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.
msgSizeTooLarge	File "{name}" (<b>{size} KB</b>) exceeds maximum allowed upload size of <b>{maxSize} KB</b>.	文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.
msgFilesTooLess	You must select at least <b>{n}</b> {files} to upload.	你必须选择最少 <b>{n}</b> {files} 来上传.
msgFilesTooMany	Number of files selected for upload <b>({n})</b> exceeds maximum allowed limit of <b>{m}</b>.	选择的上传文件个数 <b>({n})</b> 超出最大文件的限制个数 <b>{m}</b>.
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.<pre>{errors}</pre>	错误而调整图像大小。<pre>{errors}</pre>
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 …	拖拽文件到这里 …<br>支持多文件同时上传
dropZoneClickTitle	<br>(or click to select {files})	<br>(或点击{files}按钮选择文件)
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个文件，限制上传文件数。

参考

https://www.jb51.net/article/96752.htm

https://www.cnblogs.com/zhukaixin/p/9154903.html

下载地址

bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

使用 fileinput插件上传图片

Options 说明：

猜你喜欢