ajax上传图片表单取消,jquery 异步提交表单 上传图片小例子

这次做ecshop项目用到了一些小东西，这里我就把在项目中用到的一个异步上传多个产品图片的小东西，不是多好，但是是我自己查资料搞出来的。放这里，给自己和大家一个参考，欢迎丢砖！(jquery+spring mvc +jquery.form.js).上代码：

一.传统型：

1.jsp页面(上传3张图片)注意：这里各个form表单里的DOM的ID都是有顾虑的哦

这里用到了一个jquery.form.js他是jquery中用来异步提交表单的插件

宝贝图片1：

宝贝图片2：

 

宝贝图片3：

 

$(document).ready(function() {

/* 图片上传 */

$(".imgSave").click(function(){

var objhid = $(this).next().val();//处理多个form获取相关对象问题

if ($("#imgInput"+objhid).val() == "") {//先判断是否已选择了文件

alert("please select a p_w_picpath to upload!");

return;

}

$("#imgid"+objhid).css("display","block");

$("#uploadImgForm"+objhid).ajaxSubmit({

dataType:'text',/

success:function(msg){//文件上传成功后执行,msg为服务器端返回的信息

var newimg = msg.substr(0,msg.length-1);

$("#Id"+objhid).val(newimg);

$("#imgid"+objhid).attr("src",newimg);

}

});

$("#imgInput"+objhid).val("");//清空文件域

return false; //防止刷新？

});

});

2.java控制器

/**

* 异步上传产品图片action

* @param request

* @param response

*/

@RequestMapping(value = "ajaximg", method = RequestMethod.POST)

public void ajaxGoodsImg(MultipartHttpServletRequest request,

HttpServletResponse response) {

PrintWriter out = null;

try {

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

// 以下两句为取消在本地的缓存

out = response.getWriter();

MultipartFile p_w_picpathfile = request.getFile("photo");

HttpSession session = request.getSession();

String flag = null;

if (null != p_w_picpathfile && 0 != p_w_picpathfile.getSize()) {

flag = Digest.saveFile(//这个方法就是具体的实现保存文件的功能了，若成功返回文件全路径，若失败则返回false字符串，这个方法自己看着写吧

session.getServletContext().getRealPath(""), p_w_picpathfile);

if (flag == "false") {

out.write("false");

}

out.write(flag);

}

} catch (Exception e) {

e.printStackTrace();

} finally {

if (out != null) {

out.close();

}

}

}

二.spring + ajaxfileupload.js 实现不要表单异步上传图片

function uploadImage(fileId) {

$.ajaxFileUpload({

url:'/admin/article/addnewsp_w_picpaths',//用于文件上传的服务器端请求地址

secureuri:false,//一般设置为false

fileElementId:fileId,//文件上传空间的id属性  

dataType: 'text',//返回值类型 一般设置为json

// data: {'faceurl':artType},扩展参数

success: function (data, status)  //服务器成功响应处理函数

{

var fileInfo = jQuery.parseJSON(data);

alert("上传成功，返回图片路径:"+fileInfo.file_path);

},

error: function(XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

}

});

return false;

}

java---Controller

@ResponseBody

@RequestMapping(value = "article/addnewsp_w_picpaths", method = RequestMethod.POST,produces="application/json")

public Map ajaxNewsUplodImg(MultipartHttpServletRequest request, HttpServletResponse response) {

response.setContentType("text/plain; charset=utf-8");

Map result = new HashMap();

MultipartFile file = request.getFile("file");

try {

if (!file.isEmpty()){

String orgFileName = file.getOriginalFilename();

if (Digest.isAcceptedFileType(orgFileName)) {

result.put("file_path",具体上传图片工具方法);

} else {

response.setStatus(HttpStatus.UNSUPPORTED_MEDIA_TYPE.value());

}

} else {

response.setStatus(HttpStatus.UNPROCESSABLE_ENTITY.value());

}

} catch(Exception e) {

response.setStatus(HttpStatus.INTERNAL_SERVER_ERROR.value());

Logger.getLogger(ArticleController.class.getName()).log(Level.SEVERE, null, e);

}

return result;

}