图片上传

项目要求：实现图片上传，一行四张图片。

实现方法：一个imglist存放已上传的图片src，一个defaultlist 循环默认图片，循环次数为 4-imglist.size();

点默认图片执行onclick(),弹出图片选择框，选择完图片 执行onchange() 方法，调用ajaxupload 方法

把图片file传递到后台action。

前段jsp页面：

<div class="container-fluid">
<c:forEach var="image" items="${imglist }" varStatus="idx">
<td>
<img id="${image.id}" alt="${image.id}" width="120" height="120" src="<%=basePath%>${image.src}"  onmouseover="showDeleteDiv('${image.id}');" onmouseout="imgOnmouseout(),hideDeleteDiv('${image.id}');">
</td>
</c:forEach>
<c:forEach begin="${i}" end="3" step="1" varStatus="idx">
<img src="${pageContext.request.contextPath}/img/drugstore/default.png" id="img" onclick="upload()" ></img>
<span style="display: none"><input  name="advImage" id="advImage" type="file" style="opacity: 0;"/></span>
<input type="hidden" name="type" value="1" id="type1">
</c:forEach>
</div>

js代码：

function upload(){
document.getElementById("advImage").click();
}

$("input[name='advImage']").change(function(){
// 检查图片格式
var f=document.getElementById("advImage").value;

if(!/.(gif|jpg|jpeg|png|JPG|PNG)$/.test(f))
{
alert("图片类型必须是.jpeg,jpg,png中的一种")
return false;
}

$.ajaxFileUpload(
{url:"${pageContext.request.contextPath }/img/upload.do",
secureuri:false,
dataType:"text",
fileElementId:"advImage",
data: {//图片类型为1 即 店铺图片
"type": $("#type1").val(),
},
success:function (data) {
//上传成功后，直接跳出截图框，使用imgAreaSelect插件
window.location.reload();
},
error:function (data, status, e) {
alert("图片上传失败,请重新选择图片");
}
});
});

后台java代码：

@Controller
@RequestMapping("/img")
public class uploadimg
{
@Autowired
private BaseService baseService;
@RequestMapping("/upload.do")
public ModelAndView uploadPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException{

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile image=null;
if(multipartRequest.getFile("advImage")==null||"".equals(multipartRequest.getFile("advImage"))){
image = multipartRequest.getFile("aptitude");
}else if(multipartRequest.getFile("aptitude")==null||"".equals(multipartRequest.getFile("aptitude"))){
image = multipartRequest.getFile("advImage");
}
String type=request.getParameter("type");
response.setCharacterEncoding("utf-8");
//response.setHeader("ContentType", "json");
response.setContentType("application/json");
if(image!=null){
long time = System.currentTimeMillis();
String logImageName = image.getOriginalFilename();
String file_ext = logImageName.substring(logImageName.lastIndexOf(".") + 1);
//  System.out.println("[fileType:"+fileType+"][fileName:"+fileName+"][fileSize:"+fileSize+"]");
//获得项目的跟目录
String realPath = request.getSession().getServletContext().getRealPath("/");

b4e4
String realPathLast = realPath+"img\\drugstore\\";
String saveName=time+"."+file_ext;
String src="img/drugstore/"+saveName;
SaveFileFromInputStream(image.getInputStream(),realPathLast,saveName);
//获得药店用户名
String account=(String) request.getSession().getAttribute("account");
//查找药店id
String stat_find="com.yksStore.model.drugstore.findid";
Map<String, String> map1=new HashMap<String, String>();
map1.put("account", account);
int drugstore_id= (Integer) baseService.find(stat_find, map1);
String stat="com.yksStore.model.drugstore.inserimg";
Map map=new HashMap();
map.put("drugstore_id", drugstore_id);
map.put("src", src);
map.put("type", type);
baseService.insert(stat, map);
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
//输出
try {
response.getWriter().print(src);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return null;
}

public void SaveFileFromInputStream(InputStream inputStream,String path,String saveFilename) throws IOException{
FileOutputStream outputStream = new FileOutputStream(path+"/"+saveFilename);
byte[] buffer = new byte[1024*1024];
int bytesum = 0;
int byteread = 0;
while ((byteread=inputStream.read(buffer))!=-1){
bytesum+=byteread;
outputStream.write(buffer, 0, byteread);
outputStream.flush();
}
outputStream.close();
inputStream.close();
}

}

用到的js：ajaxfileupload.js，ajaxfileupload.css， jquery.min.js