之前一直使用的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);
});
}
});
});
複製程式碼