关于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空串后,我就成功了,没有红字了
这种处理(有时候如果数据库重复,也会报错,但原因不一样)
这样效果就好看许多了。
这个问题我可能是第一个写博客解释的。
希望帮助你成功。不介意点个赞。非常感谢。