Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >文件上传控件bootstrap-fileinput与Python交互

文件上传控件bootstrap-fileinput与Python交互

作者头像
嘉美伯爵
发布于 2021-01-18 03:11:38
发布于 2021-01-18 03:11:38
1.1K00
代码可运行
举报
运行总次数:0
代码可运行

注意

下面的原因,可能是和后端API交互不成功的原因

  • fileinput版本不正确,需要大于5.0
  • 前端设置的name属性值和后端接收的属性值不一致

必要的css和js文件

请确保下面的js和css文件存在

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" rel="stylesheet"
type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"
type="text/javascript"></script>

bootstrap-fileinput html

你可以在bootstrap-fileinput插件官网,选择其他样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="file" name="img" id="img" value="" multiple="multiple" data-show-preview="true"/>

bootstrap-fileinput js

这里是简化的配置,bootstrap-fileinput还有更强大的配置,可以在查看官网文档

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 $("#img").fileinput({
        language: 'en',//设置语言
        uploadUrl: "https://ky8.top/upload_images",//图片上传的url,我这里对应的是后台struts配置好的的action方法
        showCaption: true,//显示标题
        showRemove: true, //显示移除按钮
        uploadAsync: true,//默认异步上传
        showPreview: true,//是否显示预览
        textEncoding: "UTF-8",//文本编码
        browseLabel: "Select Image",
        autoReplaceBoolean: false,//选择图片时不清空原图片
    });


    $("#img").on('fileuploaded', function (event, data, previewId, index) {//异步上传成功结果处理
        {#var img = JSON.parse(data.response);//接收后台传过来的json数据#}
        var code = data['response']['code'];
        if (code === 0) {
            document.getElementById('osimg').src = data['response']['result'];
            document.getElementById('oshref').href = data['response']['result'];
            document.getElementById('mk').innerText = '!['+ data['response']['name'] +'](' + data['response']['result'] + ')';
        }
    });


    $("#img").on('fileerror', function (event, data, msg) {//异步上传失败结果处理
        alert("uploadError");
    });

成功界面

相关源码

  • 关注公众号:《Python数据结构》,回复 008 即可

参考文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
bootstrap-fileinput插件实现文件上传
bootstrap-fileinput插件下载:https://github.com/kartik-v/bootstrap-fileinput Demo地址:https://plugins.krajee.com/file-input/demo 中文文档:http://www.bootstrap-fileinput.com/ 下载好的目录如下图:
别团等shy哥发育
2023/02/25
3.1K0
bootstrap-fileinput插件实现文件上传
BootStrap的一个标准框架的内容解释——来源于bootstrap官网
<!DOCTYPE html><!--HTML5的定义--> <html lang="zh-cn"> <head> <meta charset="utf-8"><!--页面UTF-8编码--> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--bootStrap不支持ie 的编码模式,这句代码是为了让IE运行最新的渲染模式--> <meta name="viewport" content="width=device-
xing.org1^
2018/05/17
1.1K0
体验“超级无敌”的文件上传组件bootstrap fileinput
网页开发最最重要最最基本的就是富文本编辑器和文件上传,开始我迷信百度的ueditor和webupload,结果总是别扭,看来不能迷信BAT啊。富文本用了froala,文件上传早点用bootstrap fileinput那多炫啊。
hotqin888
2019/11/04
2.7K0
python自动化之BeautifulReport显示异常的解决方案
真的,大家相信我,领导也要相信我,昨天下午我下班前运行之后报告还是很完美的,非常好的。
梦无矶小仔
2022/12/20
1.1K0
python自动化之BeautifulReport显示异常的解决方案
文件上传控件fileinput
需求:当上传的文件类型为word或者pdf的时候,直接显示文件的icon;为图片的时候就是图片内容的预览。
全栈程序员站长
2022/08/24
1.2K0
文件上传控件fileinput
golang使用实践分享之gin模版引擎使用
最近在看gin,在模版引擎这块被卡克啦----伟大的强啊。今天就来分享一下gin的模版引擎渲染。
大话swift
2019/07/30
1.8K0
golang使用实践分享之gin模版引擎使用
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
Bootstrap 3 与 4 差别很大,目录文件结构、所引入的内容也不同,这里说说一下 Bootstrap 引入的文件、网页模板和兼容性问题。本网站刚刚搭建好,正好发一下文章原来测试网站。
痴者工良
2019/08/08
2.7K0
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
Bootstrap Table表格分页的使用及分页数据(Excel)导出
1:引入Bootstrap Table表格插件相关链接:这里直接拿来用就可以了,如果要下载到本地,可以自行去官网下载。
王小婷
2019/03/15
5.4K0
Bootstrap Table表格分页的使用及分页数据(Excel)导出
前端入门24-响应式布局(BootStrap)声明正文-响应式布局(BootStrap)
BootStrap 目前已经出了 4 个版本,每个版本都有对应的官网教程,先来看看不同版本里的宣传语:
请叫我大苏
2018/12/26
3.7K0
django2实战4.创建文章列表页和详情页url适配自定义模型管理器在view中写业务逻辑新建模板文件添加分页功能
我们已经知道如何操作文章表的数据,接下来要将这些数据用界面显示出来。这就需要用到django的view层负责处理http请求,并将数据传给template模板进行渲染
章鱼喵
2018/09/26
1.5K0
django2实战4.创建文章列表页和详情页url适配自定义模型管理器在view中写业务逻辑新建模板文件添加分页功能
jQuery+ajax实现简单的上传图片功能
在前面的文章里面有写到,用vue上传图片的功能,vue-element-admin上传图片的功能:https://www.jianshu.com/p/383e1f2f4276,那如果是在jQuery里面,图片上传要怎么写?今天记录一个jQuery+ajax实现简单的上传图片功能。
王小婷
2020/10/28
1.2K0
jQuery :contains 选择器
经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素(如下面的例子)。
王小婷
2025/05/20
530
jQuery :contains 选择器
jQuery点击图片开启,再次点击图片关闭效果
要求:jQuery点击图片开启,再次点击图片关闭效果 2:获取选中的图片的状态 并以整型的格式传给后端
王小婷
2025/05/19
560
jQuery点击图片开启,再次点击图片关闭效果
jQuery带参数跳转,新页面获取url的参数id
a.html <!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css
王小婷
2021/06/24
3.4K0
python测试开发django -144.Ace Editor 在线编辑python代码
网页上想在线编辑代码,可以使用Ace Editor 在线编辑实现。比如我们想实现一个功能,在网页版上写python代码,能有python的语法自动补齐功能。
上海-悠悠
2021/10/08
1.4K0
BootStrap做图片轮播效果(解析)
做不同的好看的效果一直是做一个小前端的目标,都希望可以做出不一样的页面,炫酷的页面,但是技术有的时候跟不上的时候只能是模仿,看别人是怎么做的,其实模仿的过程也就是学习的一个过程,能看明白别人的代码也是一种进步,今天就简单的讲述一下如果用bootStrapUI框架做一个图片轮播的效果。
何处锦绣不灰堆
2020/05/29
3.2K0
BootStrap做图片轮播效果(解析)
2018年laravel教程第1节搭建项目phpstorm添加laravel代码提示新建路由和控制器渲染页面定义公共模板文件公共头部和底部小结
PHP框架哪家强?这个问题估计得让PHPer撕起来,别的指标不说,仅从github的受欢迎程度来讲,laravel当之无愧是榜首:
章鱼喵
2018/08/02
2.2K0
2018年laravel教程第1节搭建项目phpstorm添加laravel代码提示新建路由和控制器渲染页面定义公共模板文件公共头部和底部小结
Bootstrap Table写一个Demo
基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
王小婷
2019/05/17
1.6K0
时间转换:toLocaleDateString()的坑
今天说一个关于toLocaleDateString()的坑。 安卓手机picker 时间选择 默认时间显示英文
王小婷
2025/05/19
350
时间转换:toLocaleDateString()的坑
laravel多图异步上传
创建路由 在routes/web.php添加: Route::get('image-upload', 'HomeController@imageUpload'); Route::post('image
章鱼喵
2019/03/20
1.7K0
laravel多图异步上传
推荐阅读
相关推荐
bootstrap-fileinput插件实现文件上传
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验