1. 程式人生 > >前端與移動開發樂淘專案-day05

前端與移動開發樂淘專案-day05

1.jquery-fileupload外掛使用的步驟:
A.引入需要的檔案:
<script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script>
<script src="assets/jquery-fileupload/jquery.fileupload.js"></script>

B.找到檔案上傳表單元素,設定id,name屬性:
<input type="file" id="fileUpload" name="file">
注意:name="file"不是每次都是寫file,應該參考介面文件設定該屬性的值

C.找到檔案上傳表單元素,設定data-url屬性用來設定圖片上傳的介面路徑:
<input type="file" id="fileUpload" name="file" data-url="/category/addSecondCategoryPic">[/size][/font]

D.編寫js程式碼,實現檔案上傳:
$("#fileUpload").fileupload({
        dataType:"json",
        //檔案上傳之後的回撥函式done
        done:function(e,data){
                //data引數中包含了上傳圖片的地址(即上傳到伺服器之後的圖片地址)
                //預覽上傳的圖片
                $("#preview").attr("src",data.result.picAddr);
        }
})