jQeury-file-upload 排坑记录

之前翻译了upload的使用方法 然后就下载了用了一下.
结果真是 研究了一天 才终于把文件上传浏览的效果做出来了
主要是有几个坑 在这里说一下.
项目前台用的是thymleaf启的 ,
然后下载了官方demo后 用的 basic-plus的那个模板.然后启动后

按钮图标显示的有问题.

有好几个图标没显示出来
然后看了一下,图标的加载是glyphicon glyphicon-plus形式的
然后看了一下加载的css文件,demo中是http形式的 我是给下载了下来 然后并没有刷出来,看了里边的css是有相对路径的,然后就又改回了http形式,然后图标就显示出来了.

x-tmpl

html文件中,有一个文件是x-tmpl格式的,然后给的注释是

<!-- The template to display files available for download -->

以为是一个模板,需要自己去修改的,然后结果他真的是一个模板,
这里用的是另外一个插件,
tmpl
下班写的都是完整的逻辑结构.
所以不需要自己再修改了.
直接可以使用的
都是先传进来数组,因为是多文件上传,就算只有一个图片上传,仍然也是数组形式的.

没有文件浏览

这个真是最大的坑了,可能也是自己对插件的理解有限,如果有大神看到了可以指点一下,这里只是写了一下自己的解决方式,方便同样问题的人解决,因为百度一直没找到解决的办法.
按照下载的文件执行,会报错,错误基本是提醒%的错误,但是在网页中检查元素,也并没有发现什么错误,首先想到的是js加载顺序问题,将jquery和tmpl的script文件放到了前边.
然后想到了前边css加载的问题,把http形式的改了回去.
然后是看了一下内容,table部分没有一个文件显示的div 当然table本身就是可以使用的 然后还是自己添加了一个

<div class=files></div>

最后是改了一下upload的写法

{% for (var i=0, file; file=o.files[i]; i++) { %}
<div class="template-download">
    {% if (file.error) { %}
        <div class="error">{%=file.error%}</div>
        <span class="cancel"><button class="btn btn-block"><i class="icon-ban-circle"></i>Cancel</span>
    {% } else { %}
    <div class="preview"><img src="{%=file.thumbnail_url%}"></div>
    <div class="name"><span>{%=file.name%}</span></div>
    <div class="size"><span>{%=o.formatFileSize(file.size)%}</span></div>
    <div class="delete"><button data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">Delete</button>
    </div>
    {% } %}
</div>
{% } %}

这个写法是百度找到的,但是上传的地方按照他的写法有了一些问题,上传还是demo的写法.把upload更改了 然后就可以顺利使用了.

image.png

解决.