java图片预览上传_Java实现图片上传预览 （使用ajax提交）

html:

图片上传：

js:

function changepic(){

var reads = new FileReader();

f = document.getElementById('file').files[0];

reads.readAsDataURL(f);

reads.onload = function(e) {

document.getElementById('img').src = this.result;

$("#img").css("display", "block");

$("#dialogBg").show();

$(".loading").show();

var form = new FormData();                  // 可以增加表单数据

// 存入文件对象

form.append("file",f);

$.ajax({

//几个参数需要注意一下

type: "POST",//方法类型

dataType: "json",//预期服务器返回的数据类型

url: "action/servlet" ,//url

enctype: "multipart/form-data",

data: form,

processData: false,

contentType : false,

success: function (result) {

...

},

error : function() {

alert("异常！");

}

});

};

}

servlet:

String filePath = getServletContext().getRealPath("/") + "upload";

HttpSession session = request.getSession();

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

if (ServletFileUpload.isMultipartContent(request)) {

try {

DiskFileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload sfu = new ServletFileUpload(factory);

sfu.setSizeMax(10 * 1024 * 1024);

sfu.setHeaderEncoding("utf-8");

@SuppressWarnings("unchecked")

ListfileItemList = sfu.parseRequest(request);

IteratorfileItems = fileItemList.iterator();

while (fileItems.hasNext()) {

FileItem fileItem = fileItems.next();

if (!fileItem.isFormField()) {

String fileName = fileItem.getName();

String suffix = fileName.substring(fileName.lastIndexOf('.'));

File file = new File(filePath);

if(!file.exists()  && !file.isDirectory()){

file.mkdir();

}

File targetFile = new File(file, "check" + suffix);

fileItem.write(targetFile);

fileItem.delete();

}

}

} catch (FileUploadException e) {

e.printStackTrace();

} catch (Exception e) {

e.printStackTrace();

}

}