ajax图片上传及时回显图片，自己总结 + ajaxFileUpload 上传文件 以及 返回值 带 标签问题

ajaxFileUpload 上传文件 以及 返回值 带

 标签问题 

dataType 可以返回 json . content .xml  .html  格式 

在遇到上传文件成功后要返回“success” 状态时 alert(data) 弹出框内有

success

 

三步解决：

1.  dataType:'content', 

2.找到了回调成功函数使用解析   data = jQuery.parseJSON(jQuery(data).text()); 

3. 还需要在java 代码内添加 如下几行代码：

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8") ;  

完美解决

图片上传和回显

环境： springMVC + spring + mybatis 

使用：ajaxfileupload.js 扩展包 + ajax异步请求

思想流程：

        1.定义一个file文件上传标签，添加单击事件 

        2.点击单击事件，单击事件完成上传图片功能 ，调用js上传插件的方法，并返回图片url

        3.img标签src属性发送请求，后台将请求图片转变为dataInputStream流，返回该流即可实现图片显示。

        4.java后台 ① 完成上传图片并返回图片生成地址 ②编写上传图片生成名字格式 ③通过url获取服务器图片文件file，流包装并返回显示图片。

html代码：

 

     图片地址：
 
 
 
 
 

 

js代码：

 

      

java代码：

/**
* 方法名称: ajaxUploadAD   
* 方法作用：     ajax 上传图片
*/
@RequestMapping(value = "uploadAD", produces = "text/plain;charset=UTF-8")
@ResponseBody
public String ajaxUploadAD(HttpServletRequest request)
throws IllegalStateException, IOException {
Object user = request.getSession().getAttribute("user");
Manager manager = null;
if (user instanceof Manager) {
manager = (Manager) user;
}

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
String fileName = "";
String uploadPath = "D:\\setup\\dajean\\uploadpng\\";
/*
* String path
* =request.getSession().getServletContext().getRealPath("/")
* +uploadPath; File uploadPathFile = new File(path); if
* (!uploadPathFile.exists()) { uploadPathFile.mkdir(); }
*/
String realPath = "";
for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
String key = (String) it.next();
MultipartFile mulfile = multipartRequest.getFile(key);
fileName = mulfile.getOriginalFilename();
fileName = handlerFileName(fileName);
File file = new File(uploadPath + fileName);
mulfile.transferTo(file);
}
Map map = new HashMap();
map.put("imgUrl", "http://localhost:8080/dajean/uploadpng/" + fileName);

realPath = MAPPER.writeValueAsString(map);
return realPath;
}

/**
* 方法名称: handlerFileName   
* 方法作用：     文件名称处理，获取唯一想要的文件名
*/
private String handlerFileName(String fileName) {
// 处理名称start
fileName = (new Date()).getTime() + "_" + fileName;
// 时间戳+文件名，防止覆盖重名文件

return fileName;
}

/**
* 方法名称: readImage   
* 方法作用：     预览，获取图片流，上传成功后显示图片
*/
@RequestMapping(value = "readImage", produces = "text/plain;charset=UTF-8")
public void readImage(HttpServletRequest request,
HttpServletResponse response) {

String imgUrl = request.getParameter("imgUrl");

String imagePath = imgUrl.replace("http://localhost:8080/dajean/uploadpng/", "D:\\setup\\dajean\\uploadpng\\");

try {
File file = new File(imagePath);
if (file.exists()) {
DataOutputStream temps = new DataOutputStream(
response.getOutputStream());
DataInputStream in = new DataInputStream(new FileInputStream(
imagePath));
byte[] b = new byte[2048];
while ((in.read(b)) != -1) {
temps.write(b);
temps.flush();
}
in.close();
temps.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}