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

 

首先，我们要下载这个插件：https://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

 

 

 

posted @ 2012-12-03 13:50  轩辕李  阅读(1485)  评论(0)  编辑  收藏  举报