第一次使用jQuery-fileupload

之前一直使用的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);
                });
            }
        });
    });