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

简介: 文件上传控件bootstrap-fileinput与Python进行数据交互

注意

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

  • fileinput版本不正确,需要大于5.0

  • 前端设置的name属性值和后端接收的属性值不一致

必要的css和js文件

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

<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插件官网,选择其他样式

<input type="file" name="img" id="img" value="" multiple="multiple" data-show-preview="true"/>

bootstrap-fileinput js

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

 $("#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");
    });

成功界面

微信截图_20201122191807.png

相关源码

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

参考文档

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2月前
|
数据库 开发者 Python
用Python代码打造你的私人网页交互系统
用Python代码打造你的私人网页交互系统
62 1
|
2月前
|
应用服务中间件 nginx Docker
使用 Python Flask 创建简易文件上传服务
在平时工作中,文件上传是一项常见的需求,例如将应用异常时通过脚本生成的dump文件收集起来进行分析,但实现起来却可能相当复杂。幸运的是,Flask框架提供了一种简单而高效的方式来处理文件上传,代码不到100行。在本文中,我们将探讨如何使用Flask实现文件上传功能,编写Dockerfile将应用程序通过docker部署。
|
2月前
|
JavaScript 前端开发
Bootstrap-Switch开关控件使用指南
Bootstrap-Switch开关控件使用指南
|
6天前
|
机器人 Shell 开发者
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
`roslibpy`是一个Python库,它允许非ROS(Robot Operating System)环境(如Web浏览器、移动应用等)与ROS环境进行交互。通过使用`roslibpy`,开发者可以编写Python代码来远程控制ROS节点,发布和订阅话题,以及调用服务。
|
4天前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
【7月更文挑战第15天】Python后端(Django/Flask)与前端通过AJAX或Fetch API实现异步交互,提升Web应用体验。Python提供强大的后端支持,AJAX用于不刷新页面的数据交换,Fetch API作为现代标准,基于Promise简化HTTP请求。结合两者,构建高效、流畅的交互系统,优化响应速度和用户体验,开启Web开发新篇章。
16 5
|
6天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
20 7
|
2月前
|
前端开发 安全 JavaScript
Python的Flask框架的学习笔记(前后端变量传送,文件上传,网页返回)内含实战:实现一个简单的登录页面
Python的Flask框架的学习笔记(前后端变量传送,文件上传,网页返回)内含实战:实现一个简单的登录页面
|
5天前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
【7月更文挑战第14天】在Web开发中,AJAX和Fetch API扮演着关键角色,用于前后端异步通信。AJAX通过XMLHttpRequest实现页面局部更新,但回调模式和复杂API有一定局限。Fetch API作为现代替代,利用Promise简化异步处理,提供更丰富功能和错误处理。Python后端如Flask、Django支持这些交互,助力构建高性能应用。从AJAX到Fetch API的进步,结合Python,提升了开发效率和用户体验。
9 0
|
6天前
|
Python
在Python中,`os`模块提供了与操作系统交互的多种方式。
在Python中,`os`模块提供了与操作系统交互的多种方式。
|
25天前
|
Python
python鼠标交互绘制彩虹圆圈
python鼠标交互绘制彩虹圆圈
11 0