ajaxfileupload.js实现上传文件功能

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">

第二步、html代码
原始的，控件展示效果如下：
因为原始控件的样式无法改变，所以我们一般会让这个标签隐藏，然后点击别的标签来触发上传控件。


<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" /> 
<div class ="input-append"> 
<label for ="importPicName"> 上传原始图片：</label > 
<input type ="text" class="input-large" id= "importPicName" /> 
<a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打开</a> 
</div > 


展现的页面效果：
第三步、js代码
在用户选择完上传图片后，需要把图片名称显示到输入框中，还需要在js文件中加入代码：


$(document).ready(function(e) { 
  $('body').on('change',$('#ImportPicInput'),function(){ 
   $( "#importPicName").val($( "#ImportPicInput").val()); 
  }); 
}); 



上传文件的js代码：


$.ajaxFileUpload({ 
 type: "POST", 
 url: "/toolkit/importPicFile.do", 
 data:{picParams:text},//要传到后台的参数，没有可以不写 
 secureuri : false,//是否启用安全提交，默认为false 
 fileElementId:'ImportPicInput',//文件选择框的id属性 
 dataType: 'json',//服务器返回的格式 
 async : false, 
 success: function(data){ 
  if(data.result=='success'){ 
   //coding 
  }else{ 
   //coding 
  } 
 }, 
 error: function (data, status, e){ 
  /coding 
 } 
}); 



第四步、java代码


@RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" ) 
 public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams, 
@RequestParam MultipartFile myfile,HttpServletRequest request){ 

   Map<String,Object> map= new HashMap<String,Object>(); 
    if(myfile.isEmpty()){ 
     map.put( "result", "error"); 
     map.put( "msg", "上传文件不能为空" ); 
   } else{ 
     String originalFilename=myfile.getOriginalFilename(); 
     String fileBaseName=FilenameUtils.getBaseName(originalFilename); 
     String floderName=fileBaseName+"_" +DateUtil.getNowTimeData(); 
     try{ 

      String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName); 
       //把上传的图片放到服务器的文件夹下 
      FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename)); 
       //coding 
      map.put( "result", "success"); 

     } catch (Exception e) { 
      map.put( "result", "error"); 
      map.put( "msg",e.getMessage()); 

     } 
   } 
   String result=String. valueOf(JSONObject.fromObject (map)); 
    return result; 
  } 




三、注意点
（1）上文html中控件的css样式，都是用的bootstrap框架里的基本样式，也可以不用使用bootstrap框架，仅做参考。 

（2）之前用的live方法，前台js报错说找不到这个方法，后来查了资料才发现，1.9以上的jquery版本已经废弃live这个方法了


$(document).ready(function(e) { 
 $('#ImportPicInput ').live( 'change', function(){ 

  }) 
}); 



(3)文件选择框必须要有name，即，且java代码中的变量要跟name的值保持一致，即@RequestParam MultipartFile myfile,这点非常的重要。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。