ajaxfile upload异步上传

ajaxfileupload

ajaxfileupload是ajax的一个插件，用于实现异步上传。可以实现不刷新页面的请款下，本地预览图片，post到后台的功能。

使用方法

首先引用js文件

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>   <script type="text/javascript" src="ajaxfileupload.js"></script>

div内使用

<div class="pop pageSetting" >     <!-- 修改头像 -->     <div class="changeUserPic">         <div class="preview">             <div class="previewPic">             </div>             <div class="choosePic">                 <input type="file" id="Filedata" name="Filedata" class="UploadImg" enctype="multipart/form-data" >                 <span></span>             </div>         </div>         <div class="clear"></div>         <div class="savePicture">             <a href="#">保存</a>         </div>         <div class="canclePicture">             <a href="javascript:void">取消</a>         </div>     </div> </div>

本地预览

//上传头像预览  
$('.choosePic').on('change', '.UploadImg', function(){  
    var file = this.files[0];        
    var reader = new FileReader();     
    reader.readAsDataURL(file);     
    reader.onload = function(e){     
        $('.previewPic img').attr('src',this.result) //图片base64编码后显示  
    }   
});
这里使用了jQuery的FileReader方法，其readAsDataURL方法用于读取指定Blob或File的内容。当读操作完成，readyState变为DONE, loadend被触发，此时result属性包含数据：URL以base64编码的字符串表示文件的数据。只要点击了上面的“浏览”按钮并选择了图片文件，就会在指定的位置生成预览。（注意这里只是在本地预览，并没有上传到服务器上）

使用ajaxfileupload上传

//正式上传头像--使用ajaxfileupload.js上传 $('.savePicture').click(function(){     $.ajaxFileUpload({         url: 'admin.php?a=img_handle',         type: 'post',         secureuri: false, //一般设置为false         fileElementId: 'Filedata', // 上传文件的id、name属性名         dataType: 'JSON', //必须使用大写！否则不能操作数据         success:function(list){             data  = JSON.parse(list); //JSON解析             var errCode = data.codeNum;//codeNum为服务端返回的数据             var errMsg  = data.msg;             var path = data.path;             //errCode为0、1、2、3、5、6均为上传不成功             if(errCode==0||errCode==1||errCode==2||errCode==3||errCode==5||errCode==6){                 $('.choosePic span').html(errMsg);                 return;             } else{                 $('.choosePic span').html(path);             }         },         error:function(data, status, e){             alert(e)         }     }); });

在这里，当出发上面的保存按钮时，边开始执行ajaxfileupload进行图片异步上传，其中success后的函数代表成功上传后要做的操作，error后的函数可以将错误信息弹出，方便调试（建议正式上线之后去掉）。

这里踩了博主的坑。。。JSON必须大写，否则不能操作数据。
其次，返回json之后，需要解析，才可以取状态码，提示信息，图片相对地址等信息。
后台处理php

 //设置图片要上传保存到服务器的绝对路径 $path = $_SERVER['DOCUMENT_ROOT'].'/team_web/Public/UserPicture/'; //图片显示的路径 $showPath = ''; if(isset($_FILES['Filedata'])){     //若上传错误，则弹出错误id     if($_FILES['Filedata']['error'] > 0){         $resultCode = 0;         $resultMsg  = '错误代码：'.$_FILES['Filedata']['error'];     } else if($_FILES['Filedata']['size'] > (2*1024*1024)){         $resultCode = 1;         $resultMsg  = '上传照片请不要大于2M';     } else {         $division = pathinfo($_FILES['Filedata']['name']);         $extensionName = $division['extension'];  //获取文件扩展名         //如果上传文件不是图片，则不保存         if( !in_array($extensionName, array('jpg', 'gif', 'png', 'jpeg'))){             $resultCode = 2;             $resultMsg  = '错误：只可以上传图片';         } else {             //对图片进行保存             $pattern='1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLOMNOPQRSTUVWXYZ';             for($i=0; $i<10; $i++)             {                 $key .= $pattern{mt_rand(0,35)};    //生成php随机数             }             $newFileName = sha1(date('Y-m-d',time()).$key).'.'.$extensionName;             $savePath    = $path.$newFileName;  //图片的存储路径             $showPath    = '/Public/UserPicture/'.$newFileName;             move_uploaded_file($_FILES['Filedata']['tmp_name'], $savePath);             if(!file_exists($savePath)){                 $resultCode = 3;                 $resultMsg  = '上传失败';             } else {                 //将图片路径添加到用户数据表中                 $resultMsg  = '上传成功';                 }             }         }     } else {         $resultCode = 5;         $resultMsg  = '文件未上传';     }     echo json_encode(array(         'codeNum' => $resultCode,         'msg'     => $resultMsg,         'path'    => $showPath,     )); }

codeNum那块儿，没做细化的处理。如有需求，自己修改一下

作者:Zilong