jQeury-file-upload 排坑記錄

之前翻譯了upload的使用方法 然后就下載了用了一下.
結(jié)果真是 研究了一天 才終于把文件上傳瀏覽的效果做出來了
主要是有幾個(gè)坑 在這里說一下.
項(xiàng)目前臺(tái)用的是thymleaf啟的 ,
然后下載了官方demo后 用的 basic-plus的那個(gè)模板.然后啟動(dòng)后

按鈕圖標(biāo)顯示的有問題.

有好幾個(gè)圖標(biāo)沒顯示出來
然后看了一下,圖標(biāo)的加載是glyphicon glyphicon-plus形式的
然后看了一下加載的css文件,demo中是http形式的 我是給下載了下來 然后并沒有刷出來,看了里邊的css是有相對(duì)路徑的,然后就又改回了http形式,然后圖標(biāo)就顯示出來了.

x-tmpl

html文件中,有一個(gè)文件是x-tmpl格式的,然后給的注釋是

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

以為是一個(gè)模板,需要自己去修改的,然后結(jié)果他真的是一個(gè)模板,
這里用的是另外一個(gè)插件,
tmpl
下班寫的都是完整的邏輯結(jié)構(gòu).
所以不需要自己再修改了.
直接可以使用的
都是先傳進(jìn)來數(shù)組,因?yàn)槭嵌辔募蟼?就算只有一個(gè)圖片上傳,仍然也是數(shù)組形式的.

沒有文件瀏覽

這個(gè)真是最大的坑了,可能也是自己對(duì)插件的理解有限,如果有大神看到了可以指點(diǎn)一下,這里只是寫了一下自己的解決方式,方便同樣問題的人解決,因?yàn)榘俣纫恢睕]找到解決的辦法.
按照下載的文件執(zhí)行,會(huì)報(bào)錯(cuò),錯(cuò)誤基本是提醒%的錯(cuò)誤,但是在網(wǎng)頁(yè)中檢查元素,也并沒有發(fā)現(xiàn)什么錯(cuò)誤,首先想到的是js加載順序問題,將jquery和tmpl的script文件放到了前邊.
然后想到了前邊css加載的問題,把http形式的改了回去.
然后是看了一下內(nèi)容,table部分沒有一個(gè)文件顯示的div 當(dāng)然table本身就是可以使用的 然后還是自己添加了一個(gè)

<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>
{% } %}

這個(gè)寫法是百度找到的,但是上傳的地方按照他的寫法有了一些問題,上傳還是demo的寫法.把upload更改了 然后就可以順利使用了.


image.png

解決.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容