js+ajax图片上传到服务器

效果：

js+ajax图片上传到服务器

Html

Css略过......

//图片上传
   $(function () {
       //只有选择不同图片才会调用，选择同一张不会调用
$("#uploadspan").change(function (e) {
   //console.log(e.target.files[0])
var file = e.target.files[0] || e.dataTransfer.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function () {
$("#headPic").attr("src", this.result);
}
reader.readAsDataURL(file);
//调用上传接口，拿到服务器图片地址,提交表单直接提交服务器src
saveImage();
}
});
})

Java接口

package com.wasu.controller;

import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import java.util.logging.Logger;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.sun.tools.javac.util.Log;

@Controller
@RequestMapping("upload")
public class UploadController {

   @Autowired
   private HttpServletRequest request;

   @ResponseBody
   @RequestMapping("img")
   public String uploadFilesSpecifyPath(@RequestParam("upload") MultipartFile uploadImg)
           throws Exception {
       String realpath="";
       if(uploadImg!=null){
           long size= uploadImg.getSize();
           if(size < 10485760){//文件设置大小，我这里设置10M。

               String name = uploadImg.getOriginalFilename();//直接返回文件的名字
               String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());//我这里取得文件后缀
               String fileName=UUID.randomUUID().toString();//文件保存进来，我给他重新命名，数据库保存有原本的名字，所以输出的时候再把他附上原本的名字就行了。
               String filepath=request.getRealPath("/") + "upload\\images\\";//获取项目路径到webapp
               File file=new File(filepath);
               if(!file.exists()){//目录不存在就创建
                   file.mkdirs();
               }
               uploadImg.transferTo(new File(file+"\\"+fileName+"."+subffix));//保存文件
               realpath=fileName+"."+subffix;
           }
       }
       return realpath;

   }

   /**
   * 返回斜杠拼接的字符串
   * @param args
   * @return
   */
   public static String mergeStringWithSeparator(String...args){
       StringBuilder sb=new StringBuilder();
       for (String arg : args) {
           sb.append(arg);
           sb.append(File.separator);
       }
       return sb.substring(0, sb.length()-1).toString();
   }
   public Object add(HttpServletRequest request,@RequestParam( value="files",required=false)MultipartFile multipartFile) throws IllegalStateException, IOException {//这里一定要写required=false 不然前端不传文件一定报错。到不了后台。
       String realpath="";
       //获取文件名
       String name="";
       if(multipartFile!=null){
           long size= multipartFile.getSize();
           if(size >5242880){//文件设置大小，我这里设置5M。

               name=multipartFile.getOriginalFilename();//直接返回文件的名字
               String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());//我这里取得文件后缀
               String fileName="123";//文件保存进来，我给他重新命名，数据库保存有原本的名字，所以输出的时候再把他附上原本的名字就行了。
               String filepath=request.getRealPath("/") + "upload\\images\\";//获取项目路径到webapp
               File file=new File(filepath);
               if(!file.exists()){//目录不存在就创建
                   file.mkdirs();
               }
           multipartFile.transferTo(new File(file+"\\"+fileName+"."+subffix));//保存文件
           realpath=file+"\\"+fileName+"."+subffix;
           }
       }
       return realpath;
   }}

js+ajax图片上传到服务器

相关推荐