使用fileinput上传文件

前言

之前有一个独立的需求,就是一个单独的表单提交页,需要上传文件,因为东西很少,所以选择了用jQuery来实现需求,对应的上传文件插件选择了fileinput插件,这里不叙述插件的用法,只记录遇到的一个问题。

表现

1.线上谷歌浏览器上传没有返回值 2.线上火狐浏览器上传有返回值,但是一直进到error 3.本地有返回值,但是一直进error

原因

跨域 我的后台解决了跨域,但是两个头部字段Access-Control-Allow-Origin,所以头部报错,依然是跨域的,后端解决好就ok啦。

后记

前端小伙伴遇到这样的问题,就不用担心是自己的问题啦。

转载于:https://juejin.im/post/5bea8adbe51d456f600126b6

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Bootstrap File Input是一款基于Bootstrap框架的文件上传插件,它可以让用户通过简单的操作上传文件,并且支持多种文件格式和预览功能。该插件易于使用,可以快速集成到网站或应用中,是一个非常实用的工具。 ### 回答2: Bootstrap File Input是一款用于文件上传的前端组件,它可以让用户更加方便地上传文件,并且支持预览功能。通过这个组件,我们可以快捷地实现文件的上传和展示,也可以自定义上传的样式和功能。 Bootstrap File Input使用步骤如下: 1. 引入相关的css和js文件:在项目中引入Bootstrap和File Input的css和js文件,可以通过CDN引入,也可以下载到本地之后引入。 2. 定义表单元素:可以在HTML中定义一个input元素,通过设置type为file来实现文件上传的功能。 3. 初始化File Input插件:在js中初始化File Input插件,通过设置不同的参数来实现自定义的功能。比如可以设置allowedFileExtensions来限制上传文件的类型,也可以设置showPreview来显示上传文件的预览图。 4. 使用File Input插件的监听方法:在监听事件中,可以对文件上传前、上传中、上传完成等操作进行相应的处理。比如可以在上传完成之后,获取文件的路径,然后将其保存到数据库中。 以下是一个基本的Bootstrap File Input使用示例: HTML代码: ``` <form enctype="multipart/form-data" method="post"> <input id="file-1" name="file[]" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"> </form> ``` JS代码: ``` $("#file-1").fileinput({ uploadUrl: "/file-upload-batch/2", allowedFileExtensions: ['jpg', 'png', 'gif'], overwriteInitial: false, maxFileSize: 1000, maxFilesNum: 10, dropZoneEnabled: false, showPreview: false, showUpload: true, showRemove: true, showCaption: true, fileActionSettings: { showUpload: false, showZoom: true }, initialPreview: [ "http://lorempixel.com/800/460/people/1", "http://lorempixel.com/800/460/people/2" ], initialPreviewConfig: [ {caption: "People-1.jpg", width: "120px", url: "/site/file-delete", key: 1}, {caption: "People-2.jpg", width: "120px", url: "/site/file-delete", key: 2} ] }); ``` 通过以上步骤,我们就可以使用Bootstrap File Input来实现前端文件上传的功能。这个插件还有很多其他的参数和方法,可以根据实际需要进行自定义。 ### 回答3: BootstrapFileInput是一个基于Bootstrap的文件上传插件,它具有多种上传和预览文件的功能。BootstrapFileInput可以让你轻松地上传单个或多个文件,可以设置图片预览,可以限制上传文件的大小和类型,同时还有许多自定义选项。 BootstrapFileInput使用很简单,只需要在HTML代码中引入必要的CSS和JS文件,然后在需要上传文件的地方添加相应的HTML代码即可。其中,最重要的HTML元素是<input type="file" class="file" data-preview-file-type="text">。这个元素定义了文件上传的基本参数,比如上传文件的类型和大小限制。同时,BootstrapFileInput还提供了多种选项用于自定义文件上传的行为,可以让你根据自己的需求来定制上传的功能。 除了基本的上传功能之外,BootstrapFileInput还提供了一些高级的功能,比如图片预览、文件列表、上传进度条等。这些功能可以让用户更加方便地使用文件上传功能,同时也可以增强用户体验。 总的来说,BootstrapFileInput是一个强大的文件上传插件,可以大大简化文件上传的开发工作,同时还提供了多种可定制选项,可以根据用户需求来进行定制。因此,BootstrapFileInput使用在Web开发中是非常广泛的。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值