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("系统正忙,请稍后重试。。。"); }});}
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;
}
} 阅读全文
0 0
- HTML5上传文件jQuery.form.js
- jquery.form.js ajax上传文件问题
- struts2+jquery.form.js文件上传注意事项
- jquery.form.js提交form表单 上传文件
- jQuery实现jQuery-form.js实现异步上传文件
- 使用jquery.form.js上传图片或文件
- 使用jquery-form.js异步上传文件和提交表单
- jfinal+jsp+jquery.form.js+oracle实现上传文件
- 利用structs2和jquery.form.js文件上传
- 使用jquery.form.js+servlet实现文件异步上传
- 使用jquery.form.js实现无刷新上传文件
- 实现jQuery-form.js实现异步上传文件
- springmvc结合jquery.form.js异步提交表单上传文件
- 关于使用jQuery-form.js上传文件的注意事项
- Jquery.form.js 上传图片
- jquery的异步提交表单(异步上传文件)及jquery.form.js上传文件注意事项
- jquery.form实现文件上传
- MVC4中使用Jquery.Multifile.js和Jquery.form.js一次上传多个文件
- 6-20总结
- codeforces 808D
- 自定义CheckBox样式
- java提高篇(十九)-----数组之二
- 使用slick 3.2 codegen 和mysql connector 6自动生成代码
- HTML5上传文件jQuery.form.js
- 简单选择排序
- Poj 2778 DNA Sequence AC自动机+矩阵快速幂
- android杂记
- 26STL之Vector
- python3 XPath语法
- service+okhttp实现断点续传下载
- faster rcnn winodws cpu配置笔记
- 词频统计(上机)