bootstrap文件上传样式,bootstrap 上传控件

　　本篇介绍如何使用引导文件输入（最好用的文件上传组件)来进行图片的展示、上传，以及如何在服务器端进行文件保存。

　　一、先来看效果图吧

　　二、引入插件的样式和脚本

　　link type= text/CSS rel=样式表 href= $ { CTX }/组件/文件输入/CSS/文件输入。CSS /script type= text/JavaScript src= $ { CTX }/组件/文件输入/js/文件输入。js /script脚本类型= text/JavaScript src= $ { CTX }/components/file input/js/file input _ locale _ zh。js /script http://插件。克拉吉这是其官方文档，里面有下载地址。

　　三、在页面上添加组件

　　输入type= file name= image class= project file value= $ { deal。image } /type=file和class=projectfile，指明其为输入文件类型姓名。指定其在后台的获取钥匙。价值指定其在展示的时候图片路径。

　　四、初始化

　　项目文件选项：{ show upload:false，showRemove : false，语言： zh ，allowedPreviewTypes : [ image ]，allowedFileExtensions : [ jpg ， png ， gif ]，maxFileSize : 2000，}，//文件上传框$(input[class=projectfile]).each(function(){ var imageurl=$(this).属性(值);if (imageurl) {var op=$ .扩展({initialPreview : [ //预览图片的设置img src= imageurl class=文件-预览-图像，]}，项目文件选项)；$(这个)。文件输入；} else {$(这个)。文件输入(项目文件选项)；}});通过框架获取对应的输入文件，然后执行文件输入方法显示上传设置是否有上传按钮100 .语言指定汉化4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果？最大文件大小指定上传文件大小五、带文件文件的形式表单通过创建交互式、快速动态网页应用的网页开发技术提交

　　我们先来看带文件的形式表单布局。

　　form class= form-horizontal required-validate action= $ { CTX }/save？回调type=confirmTimeoutForward enctype= multipart/form-data method= post on submit= return iframeccallback(this，pageAjaxDone) div class= form-group label for= class= col-MD-1 control-label 项目封面/label div class= col-MD-10 TL th input type= file name= image class= project file value= $ { deal。image } /p class= help-block 支持jpg、jpeg、png、gif格式，大小不超过2.0M/p/div/div div class= form-group text-center div class= col-MD-10 col-MD-offset-1 按钮类型=提交 class= BTN BTN-BTN初选-LG 保存/button/div/div/formenctype= multipart/form-data 必不可少返回iframeCallback(this，pageAjaxDone)方法，通过创建交互式、快速动态网页应用的网页开发技术提交表单(iframeCallback)，并且上传成功后调用回调函数(pageAjaxDone)进行下一步操作。

　　关于iframeCallback的介绍，请参照夏季笔记所在形式表单的数据提交，这里就不多做介绍了。

　　然后我们来介绍一下回调函数pageAjaxDone。

　　函数pageAjaxDone(JSON){ yunm。debug(JSON)；云姆。Ajax done(JSON)；if(JSON[yunm。钥匙。状态码]==yunm。状态代码。ok){ var msg=JSON[yunm。钥匙。消息]；//弹出消息提示云姆。调试(消息)；如果(yunm。回调类型。confirmtimeoutforward==JSON。回调类型){ $ .showSuccessTimeout(msg，function(){ window。location=JSON。转发URL});}}}其主要的功能就是通过ajaxDone方法处理服务端传递过来的错误消息，假如说服务端操作成功，那么会显示提示信息，进而跳转到对应的网址。

　　六、服务器端保存图片

　　请参照后端学习笔记一文件保存

　　ps:以上博客留了一个小疑问，一直没有去研究，直到有位非常棒的小伙伴伊赫臣给了我如下的提醒：

　　允许文件类型、允许文件扩展我知道为什么没有效果，因为文件输入()方法调用了两次，一次在文件输入。射流研究…里面最后几行，还有一次就是你自己写的$(这个)。fileinput()。在文件输入。射流研究…里的是没有设置允许文件类型、允许文件扩展值的。

　　有两种方法可以改：

　　1、把文件输入。射流研究…里的最后几行调用注释掉。

　　2、全部使用"数据——"的方法来做，不写$(这个)。fileinput()。

　　对于伊赫臣善意的提醒，我非常的感谢，虽然他提供的解释并没有解决我的疑问，但是我很喜欢这样有互动的技术交流，之前写很多博客，基本上很少发生这样善意并且行之有效的回答。这让我想起中国程序员和外国程序员，里面的故事让人震撼之余，捎带着些许的惭愧。那么如何做到"Ask questions, get answers, no distractions。"就显得特别珍贵，而“ihchenchen”则充满这种精神！

　　六、解惑allowedFileTypes 、allowedFileExtensions

　　之前困惑为什么引导文件输入为什么设置了这两个属性后，没有效果，其实是我自己的误解，如今经过一番痛彻的领悟后恍然大悟！

　　、允许的文件类型

　　允许的文件类型

　　允许上传的文件类型列表。这默认设置为空，这意味着插件支持上传的所有文件类型。如果发现无效的文件类型，则会引发msgInvalidFileType中设置的验证错误消息。文件类型设置中设置的以下类型可用于设置。

　　[图像， html ，文本,视频,音频，闪光，对象]

　　先从"允许的文件类型"说起，该属性告知我们文件的选择类型，那么我们很容易想到这样的画面：

　　也就是说，我们希望此时的"所有文件"处不是"所有文件",而是"图像"之类的。显然这样的逻辑并没有错，但却不适合引导文件输入！

　　那么，这个时候我就很容易认为"允许的文件类型"没有起到作用！

　　但请看下图：

　　吼吼，原来是在你选择了文件后发生的类型检查！

　　、允许的文件类型工作原理

　　$(这个)。fileinput({showUpload : false，showRemove : false，language : zh ，allowedPreviewTypes: [image]，allowedFileTypes: [image]，allowedFileExtensions: [jpg ， png]，maxFileSize : 2000，})；通过文件输入方法我们加载一个引导文件输入组件，那么其内部是如何实现允许的文件类型的呢？

　　通过在文件输入。射流研究…文件中搜索"允许的文件类型"关键字，我们得到如下代码：

　　var node=ctr i，previewId=previewInitId - node，isText，file=files[i]，caption=self.slug(file.name)，fileSize=(file.size 0)/1000，checkFile，fileExtExpr= ，preview data=objurl。createobjecturl(file)，fileCount=0，j，msg，typ，chk，文件类型=self。允许的文件类型，strTypes=isEmpty(文件类型)？fileTypes.join(，)，fileExt=self。允许的文件扩展名，strExt=isEmpty(fileExt)？:fileExt.join(，)；然后我们继续看到如下的代码：

　　如果(!isEmpty(fileTypes)是array(fileTypes)){ for(j=0；j文件类型。长度；j=1) { typ=文件类型[j]；check file=settings[typ]；chk=(checkFile！==未定义的checkFile(file.type，caption))；fileCount=isEmpty(chk)？0:chk。长度；} if(文件计数===0){ msg=self。msginvalidfiletype。替换(“{ name }”，标题).替换(“{ types }”，strTypes)；self.isError=throwError(msg，file，previewId，I)；返回；} }我们可以发现，文件类型的检查是发生在检查文件方法上，那么检查文件方法到底做了些什么呢？

　　defaultFileTypeSettings={ image:function(vType，vName) { return (vType！==未定义)?vType.match(image .*):vname。匹配(/\ .(pngjpe？g)$/I)；},以上就是检查文件的内容。

　　也就是说，当我们指定allowedFileTypes: [image]，我们会检查图像的类型。很明显，我们选择的txt文件不属于图片类型，所以不会匹配，就会出现上面的界面。同时这个方法告诉我们，当allowed filetype:[ image ]没有指定，只指定了允许的文件扩展名：[jpg ， png]，vName.match(/\。(pngjpe？G)$/i)，即文件后缀类型的检查。这是关键点，为我们接下来介绍“allowedFileExtensions”奠定了基础。allowedFileExtensions什么时候起作用？

　　在上一节中，我们讨论完了“allowedFileTypes”，顺便说了“allowedFileExtensions”。那么我们如何检查后缀呢？

　　$(这个)。fileinput({showUpload : false，showRemove : false，language : zh ，allowedPreviewTypes: [image]，allowedFileExtensions: [jpg ， png]，maxFileSize : 2000，})；fileinput组件此时如上指定属性，没有“allowedFileTypes”，指定允许的后缀类型为“jpg ， png]”，即如果我们选择一张gif图片，会出现错误信息。

　　发生了预期的错误，所以请特别注意：

　　image:函数(vType，vName) { return (vType！==未定义)？vType.match(image。*):vname . match(/\。(pngjpe？g)$/I)；}，fileinput.js文件中的原始代码如下：

　　image:函数(vType，vName) { return (vType！==未定义)？vType.match(image。*):vname . match(/\。(gifpngjpe？g)$/I)；}，当然后缀为}，图片类型默认包含gif。我只是举个例子，代码有调整。请注意！

　　这就是这篇关于引导文件输入文件上传组件的文章。更多自举文件输入文件上传的相关内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。