专栏首页微服务架构日记文件上传控件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");
    });

成功界面

相关源码

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

参考文档

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    嘉美伯爵
  • 体验“超级无敌”的文件上传组件bootstrap fileinput

    网页开发最最重要最最基本的就是富文本编辑器和文件上传,开始我迷信百度的ueditor和webupload,结果总是别扭,看来不能迷信BAT啊。富文本用了froa...

    hotqin888
  • 基于Django+Bootstrap框架,设计微型小说网站

     以上这段是官方的自我介绍,说说我个人感受吧。首先这个插件支持批量上传,异步上传等功能,简化大部分JS逻辑方面的代码,具体只要跟着官方的API文档看一看,修改...

    迅达集团
  • .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验

    FreeTimeWorker
  • 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界...

    MonroeCode
  • bootstrap+fileinput插件实现可预览上传照片功能

    王小婷
  • mvc文件上传支持批量上传,拖拽以及预览,文件内容校验

    网站中的上传相信大家都不陌生,也算是一个小小的技术难点,尤其时在asp.net中,上传的一些大小限制以及上传的进度的控制,以及用户体验等方面,今天在这里分享一个...

    FreeTimeWorker
  • 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet">

    lin_zone
  • 使用fileinput插件批量上传文件

      最近在做项目的时候涉及文件批量上传,使用bootstrap结合fileinput插件批量上传文件!以下是我在使用fileinput上传文件的过程。项目是基于...

    雨落凋殇

扫码关注云+社区

领取腾讯云代金券