1 下載插件
中文文檔：http://www.jq22.com/jquery-info230
2導包
1 <!-- jquery-fileupload依賴與jquery --> 2 <script src="assets/jquery/jquery.min.js"></script> 3 <!-- jquery ui小部件，上傳插件依賴了jquery ui的小部件 --> 4 <script src="assets/jquery-fileupload/jquery.ui.widget.js"></script> 5 <!-- 如果上傳圖片需要跨域，那么需要引入這個js文件，如果不跨域，則不需要引入 --> 6 <script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script> 7 <!-- jquery上傳插件 --> 8 <script src="assets/jquery-fileupload/jquery.fileupload.js"></script>
3 案例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery File Upload Example</title> 6 </head> 7 <body> 8 <!-- name指定圖片上傳時的name屬性 --> 9 <!-- data-url指定圖片上傳時的接口地址 --> 10 <!-- multiple指定多文件上傳 --> 11 <!-- <input id="fileupload" type="file" name="files" data-url="server/php/" multiple> --> 12 <input type="file" name="pic1" id="fileupload" > 13 <img id="uploadImage" src="images/none.png" width="100" height="100" alt=""> 14 <script src="assets/jquery/jquery.min.js"></script> 15 <script src="assets/jquery-fileupload/jquery.ui.widget.js"></script> 16 <script src="assets/jquery-fileupload/jquery.fileupload.js"></script> 17 <script> 18 $(function () { 19 //初始化上傳插件 20 $('#fileupload').fileupload({ 21 //上傳地址 22 url:'/category/addSecondCategoryPic', 23 //返回格式 24 dataType: 'json', 25 //e：事件對象 26 //data：圖片上傳后的對象，通過data.result.picAddr可以獲取上傳后的圖片地址 27 done: function (e, data) { 28 $('#uploadImage').attr('src',data.result.picAddr); 29 } 30 }); 31 }); 32 </script> 33 </body> 34 </html>