js读取本地图片进行预览，上传服务器

最新推荐文章于 2018-04-21 10:21:36 发布

iteye_6652

最新推荐文章于 2018-04-21 10:21:36 发布

阅读量717

点赞数

文章标签： eclipse servlet jquery html java ViewUI

本文链接：https://blog.csdn.net/iteye_6652/article/details/82610720

版权

1.js进行图片预览
使用input标签来选择图片，使用FileReader读取图片并转成base64编码，然后发送给服务器。


<html>
  <body>
    <img id="image" src="" />
    <br/>
    <input type="file" onchange="selectImage(this);"/>
    <br/>
    <input type="button" onclick="uploadImage();" value="提交"/>
    <script>
      var image = '';
      function selectImage(file){
        if(!file.files || !file.files[0]){
          return;
        }
        var reader = new FileReader();
        reader.onload = function(evt){
          document.getElementById('image').src = evt.target.result;
          image = evt.target.result;
        }
        reader.readAsDataURL(file.files[0]);
      }
      function uploadImage(){
    	  $.ajax({
    	    type:'POST',
    	    url: 'ajax/uploadimage', 
    	    data: {image: image},
    	    async: false,
    	    dataType: 'json',
    	    success: function(data){
    	      if(data.success){
    	        alert('上传成功');
    	      }else{
    	        alert('上传失败');
    	      }
    	    },
    	    error: function(err){
    	      alert('网络故障');
    	    }
    	  });
    	}
    </script>
    <script src="jquery-1.11.1.min.js"></script>
  </body>
</html>

2.服务器接收数据，然后写到磁盘


import java.io.FileOutputStream;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import sun.misc.BASE64Decoder;  

/**
 * 上传图片。
 */
public class UploadImageAjax extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
	        throws ServletException, IOException{

		String image = req.getParameter("image");

		// 只允许jpg
		String header = "data:image/jpeg;base64,";
		if(image.indexOf(header) != 0){
			resp.getWriter().print(wrapJSON(false));
			return;
		}

		// 去掉头部
		image = image.substring(header.length());

		// 写入磁盘
		boolean success = false;
		BASE64Decoder decoder = new BASE64Decoder();
		try{
			byte[] decodedBytes = decoder.decodeBuffer(image);
			String imgFilePath = "D://uploadimage.jpg";
			FileOutputStream out = new FileOutputStream(imgFilePath);
			out.write(decodedBytes);
			out.close();
			success = true;
		}catch(Exception e){
			success = false;
			e.printStackTrace();
		}

		resp.getWriter().print(wrapJSON(success));
	}

	private String wrapJSON(boolean success){
		return "{\"success\":" + success + "}";
	}
}

3.配置文件web.xml


<web-app>
  <servlet>
    <servlet-name>UploadImage</servlet-name>
    <servlet-class>UploadImageAjax</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UploadImage</servlet-name>
    <url-pattern>/ajax/uploadimage</url-pattern>
  </servlet-mapping>
</web-app>

4.需要注意的地方
需要jquery的支持：jquery-1.11.1.min.js
需要servlet的支持：servlet-api.jar
需要Base64解码支持：sun.misc.BASE64Decoder。引入这个包eclipse可能会报错，请按照[url]http://blog.csdn.net/hurryjiang/article/details/6958146[/url]进行处理。

iteye_6652

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js读取本地图片进行预览，上传服务器

1.js进行图片预览使用input标签来选择图片，使用FileReader读取图片并转成base64编码，然后发送给服务器。[code="html/js"] var image = ''; function selectImage(file){ if(!file...
复制链接

扫一扫