关于JS提交file 上传文件

 最近因写一个上传功能，不能刷新页面，且页面得有后台返回的信息，因而不能使用form直接提交表单，尝试使用is提交并接受返回数据，不多说代码如下：

 

前台：

<style>
    #show{width:680px; margin:20px auto}
    .file {position: relative;display: inline-block;background: #e2e2e2;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;
        overflow: hidden;color: #fff;text-decoration: none;text-indent: 0;line-height: 20px;}
    .file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;  }
    .file:hover {background: #999;border-color: #78C3F3;color: #004974;text-decoration: none;}
    #ulUpload{float: left;width: 220px;}
    .showimg{float: left;}
    .file{float: left;}
    .showimg{position: relative;cursor: pointer;margin-right: 10px;}
    .showimg button{position:absolute;top:0;left: 0;width: 60px;height: 60px; opacity: 0.5;background: #000;color:
            #fff;display: none;transition: all 0.5s linear;cursor: pointer;}
    .showimg:hover button{display: block;transition: all 0.5s linear;}
</style>

<div style="margin-top: 10px">
    <div id="ulUpload<{$list.pid}>"></div>
    <a href="javascript:;" class="file">嗮图
        <input type="file" name="image_url_<{$list.pid}>[]" class="upload" id="<{$list.pid}>" multiple/>
    </a>

</div>
js:
$(".upload").change(function (e) {
    var id = $(e.target).attr('id');
    var sum = $('#ulUpload'+id).children("div").length;
    if(sum >= 3){
        alert('最多只能上传3张图片！')
        return false;
    }
    var img = new FormData();
    img.append("upload", 1);
    img.append("upfile", this.files[0]);
    $.ajax({
        url: "index.php?m=attachment&c=index&a=com_upload&pid="+id,
        type: "POST",
        processData: false,
        contentType: false,
        data: img,
        success: function(data) {
            data = JSON.parse(data);
            if(data.status){
                var url = '/uploadfile/'+data.url;
                var html =  '<div class="showimg"><img style="width: 60px;height: 60px" src="'+ url + '" />' +
                        '<input type="hidden" name="image_url_'+id+'[]" value='+data.url+' />' +
                        '<button type="button" onclick="del(this)" class="btn btn-default btn-xs del">删除</button></div>'
                $('#ulUpload'+id).append(html);;
            }else{
                alert(data);
            }
        }
    });
});

function del(e,$id){
    $(e.parentNode).remove();
}
后台处理以及返回信息：
public function com_upload(){
   ////////////////评论图片上传start////////////////////////////
   $upload_img = "";
   if($this->isadmin==1) define('IN_ADMIN',true);
   pc_base::load_sys_class('attachment','',0);
   $module = trim($_GET['module']);
   $catid = intval($_GET['catid']);
   $userid = param::get_cookie('_userid');
   $siteid = get_siteid();
   $site_setting = string2array(getcache('sitelist', 'commons')[$siteid]['setting']);
   $site_allowext = $site_setting['upload_allowext'];
   $upload = new attachment($module,$catid,$siteid,'user/'.$userid.'/');
   $upload->set_userid($this->userid);
   $extArr = array("jpg", "png", "gif");
   foreach($_FILES as $key => $value) {
      if(!$value['name']) continue;
      if(empty($value['name'])){
         echo '请选择要上传的图片';
         exit;
      }
      $ext = $this->extend($value['name']);
      if(!in_array($ext,$extArr)){
         echo '请上传jpg|png|gif格式图片';
         exit;
      }
      if($value['size']>(1024*1024)){
         echo '图片大小不能超过1M';
         exit;
      }

//开始上传 最大上传1M
      $a = $upload->upload($key,$site_allowext,1024*1024);
      if($a){
         $upload_img  = $upload_img.','. $upload->uploadedfiles[0]['filepath'];
      }
   }
   $upload_img = ltrim($upload_img, ",");

   $data=array('status'=>'succ','url'=>$upload_img);
   echo json_encode($data);
   exit;
   ///////////////////////////图片上传end///////////////////////////
}
function extend($file_name){
   $extend = pathinfo($file_name);
   $extend = strtolower($extend["extension"]);
   return $extend;
}