文件、图片上传

1、首先需要导入包
          commons-fileupload.jar
          commons-io.jar
如果使用maven的话
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.2</version>
</dependency>
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.5</version>
</dependency>

2、在springMVC的配置文件中

<!-- 文件上传需要的bean -->
    < bean  id = "multipartResolver"  class = "org.springframework.web.multipart.commons.CommonsMultipartResolver"  >
       < property  name = " defaultEncoding"  value = "UTF-8"  ></ property >
    </ bean  >

3、jsp中input框type是file,提交方式是post,enctype是multipart/form-data 
     < form  action = "  ${pageContext.request.contextPath } /upload"
        method =  "post"  enctype = "multipart/form-data"  >
      文件:  < input  type =  "file"  name = "file"  >< br >
       < input  type = "submit"  value =  "提交" >< br  >
    </ form  >

在注册时,可以使用Ajax异步上传图片
< script  type =  "text/javascript" >
    function  uploadpic(){
       var  fdata =  new  FormData($( "#ff"  )[0]);
      $.ajax({
         type:  "post" ,
         url:  "${pageContext.request.contextPath }/file/upload"  ,
         data:fdata,
         contentType:  false , //使用form指定的enctype属性
         processData:  false , //默认为true,表示对提交的数据封装,当false时,不封装
         dataType:  "json" ,
         success:  function (data){
              if  (data!= null  && data.flag== "true"  ) {
                 var  name = data.fname;
               $(  "#image" ).val(name);
               alert(  "上传成功"  );
            }
         }
      });
   }
</ script >
</ head >
< body >
< div  class =  "easyui-panel"  title  = "New Topic"  style ="  width :  400px " >
       < div  style ="  padding :  10px 60px 20px 60px " >
        < form  id = "ff"  method =  "post"  action = "  ${pageContext.request.contextPath } /file/regist"
        enctype = "multipart/form-data"  >
           < table  cellpadding = "5"  >
              < tr >
                 < td >  用户名: </ td  >
                 < td ><  input  class = "easyui-textbox"  type = "text"  name = "userName"  data-options = "required:true"  ></ input ></  td >
              </ tr >
              < tr >
                 < td >  生日: </ td  >
                 < td ><  input  class = "easyui-textbox"  type = "text"  name = "birthday"  data-options = "required:true"  ></ input ></  td >
              </ tr >
              < tr >
                 < td >  性别: </ td  >
                 < td ><  input  type = "radio"  name = "sex"  value =  "1" >
                    < input  type = "radio"  name = "sex"  value =  "2" >
                 < td >
              </ tr >
              < tr >
                  < td >  头像: </ td  >
                 < td >
                    < input  id = "fileupload"  type = "file"  name = "file"  style ="  width :  100% " >
                    < input  type = "button"  onclick = "uploadpic()"  value = "上传"  >
                    < input  id =  "image"  name = "image"  type = "hidden" >
                 </ td >
              </ tr >
              < tr >
                 < td >  地址: </ td  >
                 < td ><  input  class = "easyui-textbox"  name = "address"  data-options  = "multiline:true"  style  =" height  : 60px " ></ input  ></ td >
              </ tr >
              < tr >
                 < td ><  input  type = "submit"  value = "注册" ></  td >
              </ tr >
           </ table >
        </ form  >
    
        </ div  >
    </ div  >



4、后端控制器 controller

@ Controller
@ RequestMapping( "file"  )
public  class  FileUpload {
    @ Resource
    private  MarketUserService  marketUserServiceImp ;
   
   String  filePath  =  "E:/javaWeb课程/springMVC/WebContent/image" ;
    @ResponseBody
    @ RequestMapping(  "/upload" )
    public  Map<String,String> upload(MultipartFile  file ) {
      Map<String,String>  map  =  new  HashMap<>();
       try  {
           //获取文件名
         String  filename  =  file .getOriginalFilename();
           filename  = System.currentTimeMillis()+ filename ; //解决文件名冲突
           //得到存储地址
         File  fil  =  new  File( filePath , filename  );
           if  (! fil .getParentFile().exists()) {
              fil .getParentFile().mkdir();
         }
           //存储图片
           file .transferTo(  fil );
           map .put(  "fname" ,  filename  );
           map .put(  "flag" ,  "true"  );
      }  catch  (IllegalStateException | IOException  e ) {
           e .printStackTrace();
           map .put(  "flag" ,  "false"  );
      }
       return  map ;
   }
   
    @ RequestMapping(value=  "regist" ,method=RequestMethod. POST )
    public  String regist(MarketUser  user ) {
   
       int  i  =  marketUserServiceImp .addUser( user  );
      System.  out .println( i  );
       return  "success" ;
   }



猜你喜欢

转载自blog.csdn.net/weixin_41637749/article/details/80888511
今日推荐