HTML5上传文件jQuery.form.js

来源:互联网 发布:动景眼镜集团知乎 编辑:程序博客网 时间:2024/05/17 06:56
 <form  id="fileUpload" enctype="multipart/form-data" method="post" >
<input id="txtUploadFile" name="upfile" multiple="multiple" type="file" accept="image/*"> <input id="buttonUploadFile" name="txtVideoUrl" type="button" value="确认上传"></form>
<script type="text/javascript" src="/weixin-web/static/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/weixin-web/static/jquery/jquery.form.js"></script> 
<script type="text/javascript">
$(function(){//点击   buttonUploadFile 按钮上传文件$("#buttonUploadFile").click(function(){fileUpload();});}); function fileUpload(){var value = $("#txtUploadFile").val();var suffix=value.split(".")[1];//alert(/^doc|docx|xls|xlsx$/.test(suffix));对上传文件进行格式校验if(!value || !suffix || !(/^png|bmp|gif|jpeg|jpg$/.test(suffix))){top.$.jBox.alert("请上传图片,图片必须格式为:png,bmp,jpeg,jpg,gif");return false;}$("#buttonUploadFile").attr("disabled",true);//文件上传 $("#fileUpload").ajaxSubmit({  url:"/weixin-web/app/upload/singleFileUpload", // url:"/weixin-web/app/upload/multipleFileUpload",  type:"POST",  //date:"upfile=upfile2",  success:function(result){  console.log(result);  if(result.msg=="success"){  $("#txtUploadFile").val("");  $("#img").attr("src",result.url);  }  },  error:function(msg){  alert("系统正忙,请稍后重试。。。");  }});} 

</script>  


java后台 

@Controller
@RequestMapping(value = "app/upload")
public class FileUploadController {

/**
 * 单文件上传
 * 将word,excel文件上传后,在服务器转换成图片。并返回图片的路径
 * @param upfile 上传的文件。
 * @return 转换成图片的 路径集合
 * @throws Exception
 */
@RequestMapping(value="singleFileUpload" ,method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> singleFileUpload(MultipartFile upfile,HttpServletRequest request) throws Exception{
Map<String, Object>  result = new HashMap<String, Object>();
File file = new File(upfile.getOriginalFilename());
if(upfile.isEmpty()){  
result.put("msg", "failed");
result.put("url", "");
            return result;
        } 
upfile.transferTo(file);
//上传到文件服务器
String imagePath = EasyUploadFiles.getDiyUploadFilePath(file);
file.delete();
result.put("msg", "success");
result.put("url", imagePath);
return result;
}
/**
 * 单文件上传
 * 将word,excel文件上传后,在服务器转换成图片。并返回图片的路径
 * @param uploadfile 上传的文件。
 * @return 转换成图片的 路径集合
 * @throws Exception
 */
@RequestMapping(value="multipleFileUpload" ,method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> multipleFileUpload(@RequestParam("upfile")MultipartFile[] upfiles,HttpServletRequest request) throws Exception{
Map<String, Object>  result = new HashMap<String, Object>();
List<String> imageList = new ArrayList<String>();
for(int i=0;i<upfiles.length;i++){
MultipartFile uploadfile=upfiles[i];
File file = new File(uploadfile.getOriginalFilename());
if(uploadfile.isEmpty()){  
result.put("msg", "failed");
result.put("url",imageList);
            return result;
        } 
//上传到文件服务器
uploadfile.transferTo(file);
String imagePath = EasyUploadFiles.getDiyUploadFilePath(file);
file.delete();
imageList.add(imagePath);
}
result.put("msg", "success");
result.put("url", imageList);
return result;
}
} 
原创粉丝点击