前端的文件上传



<div class="hui-form-items hui-form-itemless">
    <div class="hui-form-items-title">图片上传：</div>
   <div class="">
      
      <input id ="shopsImgList" type="hidden" name="shopsImgList" />
       <input id ="imgUrl" type="hidden" name="imgUrl" />
       <input type="file" name="file" id="uploadFile"  multiple="multiple" οnchange="uploadImage();" /></p>
      <p class="help-block">图片预览</p>
     <div class="inner_avatar_preview">
   <div id="squareHeadImg" class="preview_item square">
    
    <img style="width:150px;height:100px"class="square_img" id="imgId" src="" >
   </div>
     </div>
   </div>
     </div>

function uploadImage(){
 
  //判断是否有选择上传文件
    var imgPath = $("#uploadFile").val();
    if (imgPath == "") {
        alert("请选择上传图片！");
        return;
    }
   
    //判断上传文件的后缀名
    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
    if (strExtension != 'jpg' && strExtension != 'gif'
    && strExtension != 'png' && strExtension != 'bmp') {
        alert("请选择图片文件");
        return;
    }
   
    $.ajaxFileUpload({
        url : ctx+'/public/shopsImage',
        secureuri : false,
//            data : data,//需要传递的数据 json格式
        fileElementId :['uploadFile'],
        dataType : 'String',
        success : function(data,status) {
         console.log(data,"数据+++",status);
         debugger
         if(data.state==1){
          console.log(data.data.imgurl);
          var imgUrl=data.data.imgurl;
             $("input[name='shopsImgList']").val($("input[name='shopsImgList']").val()+","+imgUrl);
             console.log("值"+$("input[name='shopsImgList']").val());
             var imgdata=imgUrl;
                   $(&