jquery异步上传图片

异步上传图片可以用来上传图片，并预览图片而且页面不刷新，下面分享下本网站注册页面异步上传用户头像的例子：
      <form action="account/saveUser.php" method="post">
         <div class="imgupload">
        <span>头像：</span>
        <div>
        <img id="Userjpg" src="image/accountpic.png" />
        </div>
        <input form="Userpicform" name="Userpicfile" type="file" />
        <input type="hidden" name="Userpic" value="image/accountpic.png"/>
        <input id="ajaxSubmit" type="button" value="上传">
        <i id="loadview">上传头像中</i>
        </div>
        
     </form>
        
     <form id="Userpicform" action="#" method="post" enctype="multipart/form-data">
     </form>
上面是两个并列的表单，第一个表单用来填写用户注册信息，第二个表单就是异步上传表单，在第一个表单中有一个按钮触发上传事件，上传之前验证是否选择文件，上传中会提示正在上传文件，上传完成会隐藏提示，下面看下javascript脚本代码：
$(function(){
           //异步提交表单
           $("#ajaxSubmit").on("click",function(){
            if(!$("input[name=Userpicfile]").val())
            {
            alert("请选择文件!");
            return;
            }
            $("#loadview").show();
               $("#Userpicform").ajaxSubmit({
                   type:'post',
                   url:'account/upload',
                   success:function(data){
                    $("#loadview").hide();
                    var strIndex = data.indexOf(":");
                    if(strIndex>0)
                    {
                    var errStr = data.substring(strIndex+1);
                    ;
                    }else{
                    $("#Userjpg").attr("src",data);
                    $("input[name=Userpic]").val(data);
                    }
                   },
                   error:function(XmlHttpRequest,textStatus,errorThrown){
                    $("#loadview").hide();
                    alert("上传出错,请重新上传!");
                   }
               });
           });
       });

完了，后台代码没有什么特别的就不发出来了

转自  http://www.dcscms.com/article/content.php?seq=10