博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
python bootstrap 文件上传_文件上传控件bootstrap-fileinput与Python交互
阅读量:6904 次
发布时间:2019-06-27

本文共 1136 字,大约阅读时间需要 3 分钟。

f3006f3d298d8cdb13ac751c3ee11c2b.png

注意下面的原因,可能是和后端API交互不成功的原因fileinput版本不正确,需要大于5.0

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

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

type="text/css"/>

bootstrap-fileinput html

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");

});

成功界面

36ac28c30e9c8d253f27a51c133d6492.png

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

参考文档

fe386138b535421c7ecc8a151e977445.png

转载地址:http://poodl.baihongyu.com/

你可能感兴趣的文章
SAPGUI系统登录页面配置的SAProuter有什么用
查看>>
小程序hover-class点击态效果——小程序体验
查看>>
安装chrome插件
查看>>
Vue 中 CSS 动画原理
查看>>
Vue 中给组件绑定原生事件
查看>>
深入学习js之——执行上下文栈
查看>>
边缘计算入门指南
查看>>
华为云携手秒拍,云+AI助力短视频加速发展
查看>>
Vue CLI3.0 中使用jQuery 和 Bootstrap
查看>>
this 改变this的指向
查看>>
测试格式
查看>>
2-基础语法
查看>>
LeetCode1.两数之和JavaScript
查看>>
亲历者说:Kubernetes API 与 Operator,不为人知的开发者战争
查看>>
Hadoop小文件解决方案-基于NameNode内存和MapReduce性能解决方案
查看>>
gcc版本升级
查看>>
个人愚见: React 和 Vue 区别
查看>>
深入理解Docker架构与实现
查看>>
「译」代码优化策略 — Idle Until Urgent
查看>>
机器学习项目失败的9个原因,你中招了吗?
查看>>