jquery实现页面无刷新动态上传图片预览功能

var divshowphotoid = "divshowphotoid";

function fileuploadinit(property){

//alert("action "+property.action+" fileid "+property.fileid);

var iframename = "photoiframe";

$("#"+property.fileid).before("<iframe name='"+iframename+"' style='display:none;'></iframe>");

//创建显示图片的区域

$("#"+property.fileid).after("<div id='"+divshowphotoid+"'></div>");

// 创建Form

var form = $('<form></form>');

// 设置属性

form.attr('action', property.action);

var method = "POST";

form.attr("method", method);

enctype="multipart/form-data"

form.attr("enctype",enctype);

// form的target属性决定form在哪个页面提交

form.attr("target", iframename);

//复制元素

var oldElement = $("#" + property.fileid);

var newElement = $(oldElement).clone();

$(oldElement).attr("id", "test");

$(oldElement).before(newElement);

$(oldElement).appendTo(form);

form.hide();

form.appendTo($('body'));

// 提交表单

form.submit();

// 注意return false取消链接的默认动作

return true;

}

function UpdateMsg(fileurl){//此函数用来提供给提交到的页面如upload.ashx输出js的回调，更新当前页面的信息

if(fileurl==''){

alert('未上传文件！');

return false;

}

var obj=eval(fileurl);

$.each(obj,function(i){

//将后台传回的信息打印到页面中

alert(obj[i].url);

if(i%3==0){

$("#"+divshowphotoid).after('<img src="'+obj[i].url+'" width="155" height="95" /><br/>');

}else{

$("#"+divshowphotoid).after('<img src="'+obj[i].url+'" width="155" height="95" />');

}

});

}

选择文件：<input type="file" id="multiupfile" name="multiupfile" multiple="multiple" size="4" onchange="fileuploadinit({action:'/SpringMvcTest/jquery/multiphoto.html',fileid:'multiupfile'})"/><br/>

后台得到文件并存储

@RequestMapping(value="/multiphoto")

public void multiphoto(HttpServletRequest request,HttpServletResponse response,MultipartHttpServletRequest fileRequest) throws IOException{

System.out.println("******************************jquery/multiphoto");

//指定输出头和编码

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

String path = request.getSession().getServletContext().getRealPath("/");

AiyoFileUpload aiyo=new AiyoFileUpload();

//获取图片

List<MultipartFile> files = fileRequest.getFiles("multiupfile"); // 上传的图集

System.out.println("图片个数： "+files.size());

String NewUpfilePath = path+"upfile";

JSONArray jsonArray = new JSONArray();

JSONObject jsonObject = new JSONObject();

for (MultipartFile multipartFile : files) {

CommonsMultipartFile uploadfile = (CommonsMultipartFile)multipartFile;

System.out.println("uploadfile.getOriginalFilename() "+uploadfile.getOriginalFilename());

System.out.println("uploadfile.isEmpty() "+uploadfile.isEmpty());

System.out.println("uploadfile.getSize() "+uploadfile.getSize());

String uploadfilename = aiyo.fileupload(uploadfile, NewUpfilePath);

System.out.println("文件名： "+uploadfilename);

String uploadfilesaveurl = request.getContextPath() + "/upfile/";

String uploadfileurl = uploadfilesaveurl+uploadfilename;

System.out.println(uploadfileurl);

jsonObject.put("url", uploadfileurl);

jsonArray.add(jsonObject);

}

System.out.println("url链接json： "+jsonArray.toString());

response.getWriter().print("<script>parent.UpdateMsg('" + jsonArray.toString() + "')</script>");

//response.getWriter().print("<script>window.onload=UpdateMsg('" + jsonArray.toString() + "')</script>");

}