java 图片上传

功能效果1：

2: 

逻辑描述

首先   创建 一个 file 标签，一个img  标签

Html代码

<li class="list-group-item up">
         <img id="showimgs" class="preview" style="max-width: 100%;" src="img/up.png"/> <br>
         <label>
         <span>选择图片</span>
         <input  id="AddImgTitle"  type="file" name="file" οnchange="imgPreview(this)" class="getimg"/>
         </label>
     <input type="button" οnclick="up()" value="开始上传"  class="upLoad">
         </li>

js 代码 （选完图片后执行) onchange（）；

function imgPreview(fileDom){
    //判断是否支持FileReader
    if (window.FileReader) {
        var reader = new FileReader();
    } else {
        alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
    }
    //获取文件信息
    var file = fileDom.files[0];
    var imageType = /^image\//;
    //是否是图片
    if (!imageType.test(file.type)) {
        alert("请选择图片！");
        return;
    }
    //读取完成
    reader.onload = function(e) {
        //获取图片dom
        var img = document.getElementById("showimgs");
        //图片路径设置为读取的图片
        img.src = e.target.result;
    };

  reader.readAsDataURL(file);
}

这样就可以让选中的图片展示 出来了

点击开始上传 后执行 up( ) 方法

//开始上传
function up(thisimg){
 var imgurl="";
      var file = document.getElementsByClassName("getimg")[0].files[0];
      var url = "../FileUpload";
     if(file==undefined && thisimg!="img/up.png"){ //如果没选图片 或者是原始显示的图片(图片没做编辑)
     imgurl=thisimg;
     return imgurl;
      }else  if(file==undefined && thisimg=="img/up.png"){
     return imgurl;
      }else  if(file!=undefined && thisimg=="img/up.png"){
     return imgurl;
      } 吃醋代码 做回显 用 单独上传可不需要  同时 也可不传thisimg 进来
// 实例化一个表单数据对象
    var formData = new FormData();
// 插入到表单数据中
  formData.append("file",file);
    $.ajax({
        type: "POST", //必须用post
        url: url,
        crossDomain: true,
        jsonp: "callback",
        data: formData,
        contentType: false, //必须
        processData: false,
      /*  success:function (data) {
            console.log(data)
        }*/
         //不能用success，否则不执行
        complete: function (data) { 
        imgurl=data.responseText
        if(""==imgurl){
             return;
        }
        //$("#"+ids+" "+"img").attr("src","uploads/"+data.responseText);
        /* alert("上传成功！");*/
        var img = document.getElementsByClassName("getimg")[0].files[0];
         //图片路径设置为读取的图片
        img.src ="img/up.png";
           }
      });
    return imgurl;
}

//============================

FileUpload    是个servlet   需要注意他要加载到web.Xml中

中时使用的时候 路径用对

 

public class FileUpload extends HttpServlet {


 
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { 
this.doPost(request, response);
} 
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { 
String imgurl="";
response.setContentType("text/html"); 
      response.setCharacterEncoding("UTF-8"); 
      DiskFileItemFactory dfif = new DiskFileItemFactory(); 
      MyFile.createDir(request.getRealPath("/")+ "uploads");
      dfif.setRepository(new File(request.getRealPath("/")+ "uploads"));// 设置存放临时文件的目录,web根目录下的uploadtemp目录
      // 用以上工厂实例化上传组件
      ServletFileUpload sfu = new ServletFileUpload(dfif);
       // 设置最大上传尺寸 
       PrintWriter out = response.getWriter();
       // 从request得到 所有 上传域的列表
      List fileList = null;
       try {
           fileList = sfu.parseRequest(request);
       } catch (FileUploadException e) {// 处理文件尺寸过大异常 
           e.printStackTrace();
       } 
       // 得到所有上传的文件
      Iterator fileItr = fileList.iterator();
       // 循环处理所有文件
      while (fileItr.hasNext()) {
           FileItem fileItem = null;
           String path = null;
           long size = 0;
           // 得到当前文件
          fileItem = (FileItem) fileItr.next();
           // 忽略简单form字段而不是上传域的文件域(<input type="text" />等)
          if (fileItem == null || fileItem.isFormField()) {
               continue;
           }
           // 得到文件的完整路径
          path = fileItem.getName();
           // 得到文件的大小
          size = fileItem.getSize();
           if ("".equals(path) || size == 0) {
               out.println("{message:'请选择上传文件'}");
               return;
           } 
          String t_name = path.substring(path.lastIndexOf("\\") + 1);
           // 得到文件的扩展名(无扩展名时将得到全名)
          String t_ext = t_name.substring(t_name.lastIndexOf(".") + 1); 
           long now = System.currentTimeMillis();
           // 根据系统时间生成上传后保存的文件名
          String prefix = String.valueOf(now);
           // 保存的最终文件完整路径,保存在web根目录下的upload目录下
          String u_name = request.getRealPath("/") + "upload/"
                   + prefix + "." + t_ext;
          System.out.println(u_name+"URL+++++++++++++++++");
           //原来的文件名 
          path=request.getRealPath("/") + "uploads/"+ prefix + "." + t_ext;
         imgurl="uploads/"+ prefix + "." + t_ext;
          HttpSession session=request.getSession();
         session.setAttribute("path", prefix + "." + t_ext);
           try {
               // 保存文件
              fileItem.write(new File(path)); 
          } catch (Exception e) {
               e.printStackTrace();
           }


       } 
      
      
       response.getWriter().write(imgurl);
response.getWriter().flush();
response.getWriter().close();
}



}

到这里你的文件就擅长到你的服务器中 了   同事还会给你返回 上传的URL