js ,jsp图片上传预览

最近都在搞电商项目，各种图片上传都要涉及到，后台的商品相册管理，用到了flash上传，发布商品也用到了图片上传预览，但是不想继续用flash大插件，就用了file上传，预览。

因为file上传，是不提供预览的，所以只能通过ajaxfileupload 来上传。
<input type="file" name="img" id="file" style="cursor:pointer" title="点击上传图片" onchange="f(this)" value="aa"/> 用file表单添加图片，然后通过ajaxfileupload.js异步上传到后台，返回图片路径，然后加载到jsp页面的<img/>标签，即可。
下面贴一点 jsp的代码控制
//主要用来控制下上传的图片格式：
function f(obj) {
if (/jpg|jpeg|gif|bmp|png/i.test(obj.value.match(/\.(\w+)$/)[0])) {
ajaxGetFileSize();
} else {
alert("文件格式必须是jpg|jpeg|gif|bmp/png");
}
return true;
}
//异步上传，返回路径到一个<img/>表单显示

function ajaxGetFileSize(){
var url = "ajaxFileUpload";
$.ajaxFileUpload({
url : url,//用于文件上传的服务器端请求地址
secureuri : false,//一般设置为false
fileElementId : 'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType : 'json',//返回值类型 一般设置为json
success : function(data) //服务器成功响应处理函数
{
var url="file="+data.file+"&fileName="+data.picUrl;
$("#pic").attr("src","<%=basePath%>picServlet?file="+data.file+"&fileName="+data.picUrl);
$("#foodPicUrl").val(url);
$("#foodPicName").val(data.picName);

},

});
}

java后台处理代码：

//异步上传图片
public ServiceResponse ajaxFileUpload(HashMap<String, Object> info,HttpServletRequest request,HttpServletResponse response) throws Exception {
ServiceResponse sr=new ServiceResponse();

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile mf=multipartRequest.getFile("img");
String fileName = mf.getOriginalFilename();
String imageType=fileName.substring(fileName.lastIndexOf(".")+1,fileName.length());
//得到图片的二进制数据，以二进制封装得到数据，具有通用性
byte[] data = readInputStream(mf.getInputStream());
String url="image"+File.separator+Function.getDateStr2()+File.separator+Function.generateName()+"."+imageType;
//new一个文件对象用来保存图片，默认保存当前工程根目录
File imageFile = new File(url);
if(!imageFile.getParentFile().exists()){
imageFile.getParentFile().mkdirs();
}
//创建输出流
FileOutputStream outStream = new FileOutputStream(imageFile);
//写入数据
outStream.write(data);
//关闭输出流
outStream.close();
info.put("picUrl",url);
info.put("picName", fileName);
HashMap<String, Object> map=new HashMap<String, Object>();
map.put("map",info);
sr.setReturnMap(map);
sr.setResultNo(AppError.SUCCESS);
sr.setResultInfo(AppError.getErrorInfo(AppError.SUCCESS));
return sr;
}

public static byte[] readInputStream(InputStream inStream) throws Exception{
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
//创建一个Buffer字符串
byte[] buffer = new byte[1024];
//每次读取的字符串长度，如果为-1，代表全部读取完毕
int len = 0;
//使用一个输入流从buffer里把数据读取出来
while( (len=inStream.read(buffer)) != -1 ){
//用输出流往buffer里写入数据，中间参数代表从哪个位置开始读，len代表读取的长度
outStream.write(buffer, 0, len);
}
//关闭输入流
inStream.close();
//把outStream里的数据写入内存
return outStream.toByteArray();
}

因为项目急着上线，所以主要是能流程跑通，代码没有怎么优化，望读者们见谅！后面附上重要的ajaxfileupload.js（温馨提示：ajaxfileupload.js最好是放在jsp 的底部加载，如果你页面有include其他页面的时候，你就知道这个重要性了）。