ajax图片预览,Ajax 上传图片并预览的简单实现

1. 直接上最简单的 一种 ajax 异步上传图片，并预览

html：

图片上传 | cookie

file:

desc:

function upload() {

$.ajaxFileUpload({

url : 'upload.htm',

fileElementId : 'images',

dataType : 'json',

data : {desc : $("#desc").val()},

success : function(data) {

var html = $(".images").html();

html += ''

$(".images").html(html);

}

})

return false;

}

servlet：

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

DiskFileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

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

String name = null;

try {

List items = upload.parseRequest(request);

for (FileItem item : items) {

if(item.isFormField()){

System.out.println(item.getFieldName() + ": " + item.getString());

} else {

name = item.getName();

item.write(new File(path,name));

}

}

PrintWriter out = response.getWriter();

out.print("{");

out.print("url:\"" + name +"\"");

out.print("}");

} catch (Exception e) {

e.printStackTrace();

}

}

2. 这里会 用到一个 ajaxupload.js， 网上多得很。

以上就是小编为大家带来的Ajax 上传图片并预览的简单实现的全部内容了，希望对大家有所帮助，多多支持脚本之家~