jquery 异步提交表单 上传图片小例子

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

一.传统型：

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

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

<script type="text/javascript" src=\'#\'" /jquery.form.js"></script>
<script type="text/javascript" src=\'#\'" /jquery.form.js"></script>

<div id="Layer1">
宝贝图片1：<--loading.gif是上传图片过程中的进图图片-->
<img src=\'#\'" /loading.gif" id="imgidmainImg" width="50px" height="50px" style="display:none;"></img>
   <form action="admin/goods/ajaximg" enctype="multipart/form-data" method="post" id="uploadImgFormmainImg">
 <input id="imgInputmainImg" type="file" name="photo" value="上传" />
 <input type="button" class="imgSave" value="确定" />
 <input type="hidden" value="mainImg"></input>
</form><br><br><br><br>
宝贝图片2：
 <img src=\'#\'" /loading.gif" id="imgidgoodsimage2" width="50px" height="50px" style="display:none;"></img>
   <form action="admin/goods/ajaximg" enctype="multipart/form-data" method="post" id="uploadImgFormgoodsimage2">
 <input id="imgInputgoodsimage2" type="file" name="photo" value="上传" />
 <input type="button" class="imgSave" value="确定" />
 <input type="hidden" value="goodsimage2"></input>
</form>
<br><br><br><br>
宝贝图片3：
 <img src=\'#\'" /loading.gif" id="imgidgoodsimage3" width="50px" height="50px" style="display:none;"></img>
   <form action="admin/goods/ajaximg" enctype="multipart/form-data" method="post" id="uploadImgFormgoodsimage3">
 <input id="imgInputgoodsimage3" type="file" name="photo" value="上传" />
 <input type="button" class="imgSave" value="确定" />
 <input type="hidden" value="goodsimage3"></input>
</form>
</div>

<script type="text/javascript">
 $(document).ready(function() {
  /* 图片上传 */
  $(".imgSave").click(function(){
   var objhid = $(this).next().val();//处理多个form获取相关对象问题
   if ($("#imgInput"+objhid).val() == "") {//先判断是否已选择了文件
    alert("please select a image 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; //防止刷新？
  });
 });
</script>

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 imagefile = request.getFile("photo");
   HttpSession session = request.getSession();
   String flag = null;
   if (null != imagefile && 0 != imagefile.getSize()) {
    flag = Digest.saveFile(//这个方法就是具体的实现保存文件的功能了，若成功返回文件全路径，若失败则返回false字符串，这个方法自己看着写吧
      session.getServletContext().getRealPath(""), imagefile);
    if (flag == "false") {
     out.write("false");
    }
    out.write(flag);
   }
  } catch (Exception e) {
   e.printStackTrace();
  } finally {
   if (out != null) {
    out.close();
   }
  }
 }

 

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

<script src=\'#\'" /js/jquery.js" type="text/javascript"></script>

<script src=\'#\'" /js/ajaxfileupload.js" type="text/javascript"></script>

    <input id="filePathId" type="file" name="photo" size="28" value="浏览" />

 <input type="button" class="btnInput" id="btnOK" value="上传" onclick="uploadImage()"/>

function uploadImage(fileId) {

$.ajaxFileUpload({

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

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

fileElementId:fileId,//文件上传空间的id属性  <input type="file" id="file" name="file" /> 

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/addnewsimages", method = RequestMethod.POST,produces="application/json")

public Map<String, Object> ajaxNewsUplodImg(MultipartHttpServletRequest request, HttpServletResponse response) {

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

Map<String, Object> result = new HashMap<String, Object>();

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;

}