之前一直使用的uploadify上傳組件,但是因?yàn)閡ploadify組件的上傳按鈕實(shí)在是太丑了,給他自定義樣式,但是特別難調(diào)整樣式,在網(wǎng)上搜了一下常用的上傳組件,發(fā)現(xiàn)jQuery-fileupload還是比較受歡迎的,于是就準(zhǔn)備嘗試一下.
首先還是從git上面下載它,打開解壓之后發(fā)現(xiàn)里面的示例用的都是別的語(yǔ)言,看不懂,然后就去git上面的文檔開始看介紹.
基本的示例
引入js相關(guān)文件,引入的js文件必須是按照順序的,不然會(huì)提示XX函數(shù)為找到
<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有兩種綁定事件的方式,上面一種是以前的方式,官網(wǎng)上面的示例是另一種方式,我一開始也是用比較新的方式,但是沒有效果,可能是我哪里沒寫對(duì).然后在網(wǎng)上找了第一種方式.
$(function() {
$('#fileupload').fileupload({
dataType : 'json',
done : function(e, data) {
$.each(data.result.files, function(index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});