无刷新文件上传之二:Jquery文件上传插件--ajaxfileupload

 

首先,我们要下载这个插件:http://files.cnblogs.com/china-li/ajaxfileupload.js

还是一样,先看网页代码:

<body>

    <input name="file_img" type="file" value="" id="file_img" />

    <input type="submit" value="上传" name="upload" onclick="uploadImage();" />

    <p>提示:小于100K jpg、png、gif图片,图片尺寸:960*100</p>

    <div>

        <p class="tip" style="display: none;">文件正在上传...</p>

        <img id="show_img" style="display: none;" src="" />

    </div>

</body>

我们看到,代码很简洁。也没有form表单,只是两个按钮。

引入jquery和引入插件,然后进行文件上传:

 1 <script type="text/javascript" src="jquery.js"></script>

 2 <script type="text/javascript" src="ajaxfileupload.js"></script>

 3 <script type="text/javascript">

 4     function uploadImage() {

 5         var file_img = $('#file_img'), 

 6             img_tag = $('#show_img'),

 7             tip = $(".tip");

 8         if (checkImage(file_img)) {

 9             tip.ajaxStart(function() {

10                 $(this).show();

11             })//开始上传文件时

12             

13             $.ajaxFileUpload({

14                 url : 'http://localhost:8888/Spring/customer/login.do',//用于文件上传的服务器端请求地址

15                 secureuri : true,//是否安全提交,设置为true;设置为false,则出现乱码

16                 fileElementId : 'file_img',//文件上传空间的id属性  <input type="file" id="file" name="file" />

17                 data:{test:'woshiliheng'},//这个版本的插件已经支持其他属性值了,data的值是json格式

18                 dataType : 'text',//返回值类型 ,可以使xml、text、json、html

19                 success : function(data, status) //服务器成功响应处理函数

20                 {

21                     tip.hide();                    

22                     if(data == 'err'){

23                         alert('文件大小不大于100K!');

24                     }else{

25                         img_tag.attr('src',data).show();    //获得突破地址,显示图片

26                     }

27                 },

28                 error : function(data, status, e)//服务器响应失败处理函数

29                 {

30                     alert('异常,请联系网站维护人员!');

31                 }

32             })

33 

34         }

35     }

36 

37     /**

38         验证上传图片信息

39         1、验证图片格式

40         2、验证图片尺寸

41      */

42     function checkImage() {

43         var img, //待要上传的图片

44         fileName = $('#file_img').val(), //图片名称

45         fileType, //图片类型

46         check = true; //一个条件变量

47         fileType = fileName.substring(fileName.lastIndexOf('.') + 1);

48         //1、

49         if (check && fileType != 'jpg' && fileType != 'png'

50                 && fileType != 'gif') {

51             check = false;

52             alert('图片格式不正确');

53         }

54         //2、

55         if (check) {

56             img = new Image();

57             img.src = 'file:///' + fileName;

58             if (img.width != 960 || img.height != 100) {

59                 check = false;

60                 alert('图片尺寸不符合规定!');

61             }

62         }

63         return check;

64     }

65 </script>

这个插件以前不能传其他参数,没有data属性,现在有了,功能很强大。

其实我们进入看这个插件的代码,会发现它也是使用了iframe来实现无刷新的。不过能做成插件的形式,还是费了一番功夫!

大家看注释,就明白怎么使用了,非常简单。至于后台的代码如何实现的,可以参考:http://www.cnblogs.com/china-li/archive/2012/12/03/2799362.html

 

 这个插件返回json有点问题,总解析不了,参考:http://hepeng19861212.iteye.com/blog/1177241

 

 

 

你可能感兴趣的:(ajaxFileUpload)