之前一直使用的uploadify上傳組件,但是因為uploadify組件的上傳按鈕實在是太丑了,給他自定義樣式,但是特別難調整樣式,在網上搜了一下常用的上傳組件,發現jQuery-fileupload還是比較受歡迎的,于是就準備嘗試一下.
首先還是從git上面下載它,打開解壓之后發現里面的示例用的都是別的語言,看不懂,然后就去git上面的文檔開始看介紹.
基本的示例
引入js相關文件,引入的js文件必須是按照順序的,不然會提示XX函數為找到

<script src="/app/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="/js/jquery-fileupload/jquery.fileupload.js" type="text/javascript"></script>
<script type="text/javascript"
src="/js/jquery-fileupload/jquery.iframe-transport.js"></script>
<img src="" id="image1">
<input type="file" class="hide-input" accept="image/*" id="fileupload1" data-url="/userFileUpload2.do" name="file">
//初始化上傳組件
    $('#fileupload1').fileupload().bind('fileuploaddone',function(e,data){
        console.debug(data.result);
        $("#image1").prop("src",data.result);
        $("#registForm [name=image1]").val(data.result);
    })

jQuery-fileupload有兩種綁定事件的方式,上面一種是以前的方式,官網上面的示例是另一種方式,我一開始也是用比較新的方式,但是沒有效果,可能是我哪里沒寫對.然后在網上找了第一種方式.

$(function() {
        $('#fileupload').fileupload({
            dataType : 'json',
            done : function(e, data) {
                $.each(data.result.files, function(index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });