1.首先我们先写了一个图片的上传的通方法
lic class UploadUtils {
public static Map<String, String> uoLoadImage(MultipartFile oldFile,HttpSession session) {
if (oldFile != null) {
Map<String, String> map = new HashMap<String, String>();
String oldName = oldFile.getOriginalFilename();
String path = session.getServletContext().getRealPath("/");//获取项目路劲名
String type = oldName.substring(oldName.lastIndexOf(".") + 1);//获取后缀名
if (oldFile != null) {
if (type != null) {
if (("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase()) || "JPG".equals(type.toUpperCase()))) {
String trueName = System.currentTimeMillis() + Math.random() * 10 + "." + type; //随机数作为名称
File file = new File(path + "/upload/" + trueName);
// 判断父级目录是否存在,不存在则创建
if (!file.getParentFile().exists()) {
file.getParentFile().mkdir();
}
// 判断文件是否存在,否则创建文件(夹)
if (!file.exists()) {
file.mkdir();
}
try {
oldFile.transferTo(file);
map.put("info", "图片添加成功");
map.put("path", "/upload/" + trueName); //返回路劲
return map;
} catch (IOException e) {
e.printStackTrace();
}
}
}else{
map.put("info", "格式不正确");
return map;
}
}else{
map.put("info", "文件夹为空!!!");
return map;
}
}
return null;
}
接下来还是附带洗了一个图片的删除`
public static Boolean delImage(String path ,HttpSession session){
boolean delete = false;
try {
String realPath = session.getServletContext().getRealPath("/");
File file =new File(realPath+path);
delete = file.delete();
return delete;
}catch (Exception e) {
}
return delete;
}`
接下来就是页面,一个form表单
<form name="myForm" method="post" id="myForm" enctype="multipart/form-data" >
ajax
var formData = new FormData($("#myForm" )[0]);
$.ajax({
url: '<%=path%>/tfsl/TFriendSL_addPic' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false, //必须的
processData: false, //必须的
success: function (data) {
var info = $.parseJSON(data);
var msg = info.msg;
if(msg == "true"){
var curId = window.parent.document.getElementById("curId").value;
var listWin = window.parent.document.getElementById("iframe"+curId);
var scope = listWin.contentWindow.angular.element('#Job_list').scope();
scope.searchList();
top.layer.alert(info.msgInfo, {icon: 6});
$("#btnmysave").addClass(" disabled");
$("#btnmysave").attr("disabled","disabled");
$scope.myreadonly = true;
}else{
top.layer.alert(info.msgInfo, {icon: 6});
}
}
});
这里就是一个图片的上传配合ajax和formData,下面是你选好图片的时候图片在页面的的显示
$("#oldImage").bind('change',function () {
$("#images").attr("src",URL.createObjectURL($(this)[0].files[0]));
// $("#images").css('display','block');
$("#images").removeAttr("style");
});
表单部分
<tr>
<td class="td-name" align="center">图片</td>
<td width="80%" class="tdright">
<img style=" display: none" id="images" width="350" height="200"/>
<input type="file" name="oldImage" id="oldImage"/>
</td>
</tr>
这样就可以达到显示的效果了,小白第一次写 见证自己的成长!!!
下面是Formdata的介绍和使用
https://blog.csdn.net/yezitoo/article/details/78339201