关于bootstrap框架的fileinput插件的初步使用以及显示upload error json问题

这次做老师的作业，需要实现文件上传的功能。于是我便上网上搜了一下。(我是用servlet接收的，提醒一下。没用框架)

也询问了同学。后来发现不少同学用的是layui实现的，直接使用，确实方便。而且学习使用也并不是难，反而十分的简单。

但是因为前端用的是bootstrap代码写的页面，也不想在进行重构什么的，能实现就实现。于是在网上搜索一下bootstrap框架实现文件上传的功能。

有的是别人自己写的，复制粘贴也确实能用，不过上传的时候还是有点儿问题，功能也不是特别全面。

后来在知乎上发现了基于bootstrap实现的file-input插件。这个插件也确实好用，功能也确实全面。不过用了好几次file-input的上传功能。

不仅没有上传上去，而且也不显示错误。后来发现是函数没有调用正确，正确的应该这样写。

 $("#txt_file").fileinput({
                uploadUrl: "http://localhost:8080/Home/DataImServlet", //上传的地址，ajax的路径差不多
               // allowedPreviewTypes: ['csv'],
                allowedFileExtensions : ["txt", "xls","csv","xlsx"],//指定待上传文件后缀
                //fileType: "any", // “any”表示允许上传任何类型的文件
                showUpload: false, //是否显示上传按钮
                showCaption: false,//是否显示标题
                msgNo:true ,
                previewSettings:{
                    image: {width: "auto", height: "auto", 'max-width': "100%", 'max-height': "100%"},
                    html: {width: "213px", height: "160px"},
                    text: {width: "213px", height: "160px"},
                    office: {width: "213px", height: "160px"},
                    gdocs: {width: "213px", height: "160px"},
                    video: {width: "213px", height: "160px"},
                    audio: {width: "100%", height: "30px"},
                    flash: {width: "213px", height: "160px"},
                    object: {width: "213px", height: "160px"},
                    pdf: {width: "213px", height: "160px"},
                    other: {width: "213px", height: "160px"}
                },

                // enableResumableUpload: true,
                // resumableUploadOptions: {
                    // uncomment below if you wish to test the file for previous partial uploaded chunks
                    // to the server and resume uploads from that point afterwards
                    // testUrl: "http://localhost/test-upload.php"
                // },
                // uploadExtraData: {
                //     'uploadToken': 'SOME-TOKEN', // for access control / security
                // },

                browseClass: "btn btn-primary", //按钮样式
                overwriteInitial: false,//重新初始化
                toggleheader: "toggle header",
                msgzoommodalheading:"detailed preview",
                maxFileSize: 10000,// 文件允许上传的最大size,单位kb
                maxFilesNum: 1,  //最多上传数量
                dropZoneEnabled: true,
                previewTemplates:{
                generic: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" data-template="{template}">\n' +
                '   {content}\n' +
                '   {footer}\n' +
                '</div>\n'},
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
            });



        $("#txt_file").on("filebatchselected", function(event, files) {
                $(this).fileinput("upload");//根据自己是同步，异步，ajax,form表单等选择，上传，一般直接这样写，而且要回调

            }).on("filebatchuploadsuccess", function(event, data) {
            // $("#txt_file").val("done");
//不重要，不成功可以console进行debug
        }).on("fileerror", function(event, data, msg) {  //一个文件上传失败
            alert(msg);
//不重要，不成功可以console进行debug
        });

反正我多次没上传上去，就是因为这个函数的不正确。 

$("#txt_file").on("filebatchselected", function(event, files) {

$(this).fileinput("upload");//根据自己是同步，异步，ajax,form表单等选择，上传，一般直接这样写，而且要回调})

随后上传完成后可能会遇到一个问题，是和json有关的

 

 这个错误找了老久，也没找到。而且文件能够上传成功。但是就是显示红字，报错。

我浪费了一两个小时去搜索，找了json找了ajax。都找不到。

后来在一个网站上发现叫stackoverflow，人家写的是php代码，虽然也是前端。

但是并没有人因为使用这个插件而报错。不过我还是看了一下。

错误原因是因为可能需要接受json格式的数据或者是接受到json格式的数据不正确。可是我也没用json返回数据啊。

json的格式是这样的“{}”。提醒记得记住。

随后经过奇思妙想一阵事件。反正这文件上传和ajax差不多，于是便使用了，神奇的代码。

resp.getWriter().print("{}");//必须加上，它就要

神奇的代码。代码很短，写在servlet最后。但是会起到神奇的效果。

就返回了一个json空串后，我就成功了，没有红字了

这种处理(有时候如果数据库重复，也会报错，但原因不一样)

这样效果就好看许多了。

这个问题我可能是第一个写博客解释的。

 

 

希望帮助你成功。不介意点个赞。非常感谢。