fileupload.js上传插件的简单实用

1 下载插件

 github地址:https://github.com/blueimp/jQuery-File-Upload

 中文文档: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>

 

posted @ 2019-03-16 15:52  xx_sprog  阅读(6909)  评论(0编辑  收藏  举报