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>