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其他页面的时候，你就知道这个重要性了）。

本文出自 “心的呼唤” 博客，请务必保留此出处http://1008610086.blog.51cto.com/4995677/1386107

js ,jsp图片上传预览,古老的榕树,5-wow.com